مشخصات مقاله
-
1369
-
0.0
-
3058
-
0
-
0
آموزش درک Observable در Knockout.js
رمز فایل :tahlildadeh.com
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
درک Observable در Knockout.js
مقدمه
قبل از شروع این مقاله باید ابتدا مقاله قبلی با عنوان " تنظیم Visual Studio 2013 برای توسعه Knockout.js" را مطالعه کرده باشید.
این مقاله چگونگی استفاده از آرایه ها در Knockout.js را توضیح خواهیم داد. هنگامی که می خواهیم با استفاده از observableها، یک object را شناسایی کرده و به تغییرات آن پاسخ دهیم، Knockout.js نقش مهمی را بازی میکند.
Observable در خیلی از جاها استفاده می شود از جمله، زمانی که چندین مقدار را نمایش می دهیم یا ویرایش می کنیم و نیاز است با حذف و اضافه کردن هر آیتم، بخش های تکراری از UI ظاهر شوند. مزیت اصلی KO این است که زمانی view model تغییر می کند، به صورت خودکار بروزرسانی می شود. برای اعمال کردن این ویژگی های KO باید ویژگی های مدلمان را به صورت observable تعریف کنیم. چون این JavaScript است که تغییرات را به اطلاع subscriberها (مشترکین) می رساند و به صورت خودکار وابستگی ها را حذف می کند. KO مهمترین ویژگی برای تازه سازی (Refresh) خودکار UI است. این کار زمانی انجام می شود که تغییرات در ViewModel، به View اعلام شود.
مرحله 1
Visual Studio را باز می کنیم:
![clip_image001[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B10%5D_16.png "clip_image001[10]")
مرحله 2
حالا برای ایجاد یک وب سایت به گزینه File>New>Website می رویم.
![clip_image002[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image002%5B10%5D_6.png "clip_image002[10]")
مرحله 3
حالا باید کتابخانه knockout.js را به وب سایتمان اضافه کنیم. برای این کار بر روی وب سایت راست کلیک کرده و گزینه NuGet Packages را انتخاب کنید.
![clip_image003[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image003%5B10%5D_4.png "clip_image003[10]")
مرحله 4
در این مرحله نیز همانند مقاله قبل، باید کتابخانه Knockout.js و jQuery را جستجو کرده و به وب سایتمان اضافه کنیم. پس از اضافه کردن کتابخانه Knockout.js، باید یک Web Form به وب سایت اضافه کنیم. این کار را با راست کلیک بر روی وب سایت و انتخاب Add>WebForm انجام می دهیم.
![clip_image004[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image004%5B10%5D_4.png "clip_image004[10]")
سپس یک نام برای آن انتخاب میکنیم.
![clip_image005[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image005%5B10%5D_1.png "clip_image005[10]")
مرحله 5
کد آرایه observable به صورت زیر خواهد بود:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Understanding Observables in Knockout.js</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>First Name :<span data-bind="text: firstName" /></p>
<p>Middle Name :<span data-bind="text: MiddleName" /></p>
<p>Last Name:<span data-bind="text: LastName"></span></p>
</div>
<hr />
<div>
<p>First Name<asp:TextBox ID="txname" runat="server" data-bind="value:firstName"></asp:TextBox></p>
<p>Middle Name<asp:TextBox ID="txtlstnme" runat="server" data-bind="value:MiddleName"></asp:TextBox></p>
<p>Last Name<asp:TextBox ID="txtlastname" runat="server" data-bind="value:LastName"></asp:TextBox></p>
</div>
<hr />
<p>Full Name :<span data-bind="text: fullName"> </span></p>
</form>
<script src="Scripts/knockout-3.3.0.js"></script>
<script type="text/javascript">
var vm =
{
firstName: ko.observable("yatendra"),
MiddleName: ko.observable("Kumar"),
LastName: ko.observable("Sharma")
};
vm.fullName = ko.dependentObservable(function () {
return vm.firstName() + " " + vm.MiddleName() + " " + vm.LastName();
});
ko.applyBindings(vm);
</script>
</body>
</html>
در این کد با استفاده از observableها تغییرات یک شی را شناسایی می کنیم و به آن پاسخ می دهیم. بنابراین observableها زمانی مفید هستند که بخواهیم چند مقدار تغییر کنند و نیاز است بخش های تکراری ای از UI، با حذف و اضافه کردن آیتم ها ظاهر و مخفی شوند.
مرحله 6
پس از نوشتن کد باید وب سایت را با استفاده از کلید F5 اجرا کنیم. پس از اجرا صفحه زیر نمایش داده می شود:
![clip_image006[10]](http://articles.tahlildadeh.com/image.axd?picture=clip_image006%5B10%5D_3.png "clip_image006[10]")
مرحله 7
اگر نام را در textbox تغییر دهیم، نام در بخش بالایی پنجره هم به صورت خودکار تغییر می کند.
![clip_image007[4]](http://articles.tahlildadeh.com/image.axd?picture=clip_image007%5B4%5D_17.png "clip_image007[4]")
بنابراین، observable به خوبی کار می کند. زمانی که یک بخش را تغییر می دهیم، تغییرات مشابهاً در بخش متصل دیگر هم اتفاق می افتد.
جمع بندی
در این این مقاله نحوه کارکرد observable ها را در Knockout.js و نیز چگونگی استفاده از Observable Knockout.js در Visual Studio 2013را توضیح دادیم.