نویسنده اسماعیل شیدایی

یک شنبه 16 آذر 1393 - 14:35

آموزش Knockout (بخش دوم)

بسم الله الرحمن الرحیم

در صورتی که در دوره آموزش Angular شرکت نکردید پیشنهاد می کنیم، این دوره را حتما بررسی کنید، برای مشاهده این دوره می توانید از طریق لینک زیر اقدام کنید.

آموزش Knockout

دوره آموزشی Knockout

بخش اول

بخش دوم (شروع کار با Knockout)

بسم الله الرحمن الرحیم

آموزش Knockout

دوره آموزشی Knockout

بخش اول

بخش دوم (شروع کار با Knockout)

اولین برنامه Knockout

قبل از اینکه به داخل بخش Knockout برویم نیاز است شما این کتابخانه را دانلود کنید و به صفحه خود آن را معرفی کنید.

برای دانلود این کتابخانه می توانید از طریق لینک زیر اقدام کنید

https://github.com/knockout/knockout/downloads

<script type='text/javascript' src='knockout-2.0.0.js'></script>

این روش به عنوان بهترین راه ممکن در نظر گرفته شده است اما شما می توانید برای مقاصد تمرین کدهای خود را در ابتدای صفحه اصلی برنامه در میان تگ JavaScript بنویسید.

<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='knockout-2.0.0.js'></script>
<script type='text/javascript' src='application.js'></script>

حالا وقت این است که یک view model فقط برای تعیین هر شی JavaScript شبیه به این مثال ایجاد کنید:

 function viewModel() {

   // Your code here
  
  };

برای جداسازی بخش کد از بخش لایه نمایش بهتر است یک فایل JavaScript برای نگهداری از همه ی کدهای برنامه ایجاد کنید.

خاصیت data-bind (بعدا آن را توضیح خواهیم داد) جز دستورات محلی HTML نیست و browser نمی داند که معنای این دستور چیست. بنابراین به منظور تاثیر، Knockout به وسیله تابعko.applyBindings() که در انتهای کد ما نوشته شده است فعال شده است. همچنین اگر شما از فایل JavaScript خارجی استفاده می کنید یا کد شما در تگ <head> صفحه قرار گرفته است شما نیاز دارید کد Knockout را در یک تابع jQuery ready قرار دهید تا به درستی کار کند. در اینجا برای شروع Template پایه نوشته شده است:

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

فراخوانی متد ko.applyBindings() و انتقال به view model ما به Knockout می گوید model مشخص شده را به UI ما مقید کند. شما حتی اگر می خواهید اینview model را به یک بخش از UI مقید کنید، می توانید یک عنصر DOM را برای اینکار فراهم کنید. ko.applyBindings() دو پارامتر دارد، پارامتر اول می گوید شما کدام شی view model را می خواهید با فعالیت های declarative bindings مورد استفاده قرار دهید. پارامتر دوم یک پارامتر اختیاری است، این پارامتر بخشی از سند را که می خواهید مورد جستجو برای خاصیت data-bind قرار گیرد تعریف می کند. برای مثال

ko.applyBindings(viewModel, document.getElementById('container'))

این دستور باعث می شود برنامه به فعالیت های عنصری با ID مشخص شده ('container') به همراه عنصرهای فرزندش محدود شود.
اگر بخواهید چندین Model داشته باشید و هر یک از بخش های صفحه را به یک Model وابسته کنید این پارامتر بسیار مفید است.

توضیح برنامه

با Knockout ما می توانیم داده ها را به یک DOM به وسیله استفاده از خاصیت data-bind مقید کنیم. کد ما هیچ ارجاعی به ساختار DOM ندارد پس شما می توانید HTML های خود را آزادانه و بدون اینکه کدها دچار مشکل شوند تغییر دهید. در مثال زیر ما خاصیت data-bind به صورت text به عنصر span شبیه این کد اضافه کرده ایم.

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

در نتیجه اگر ما می خواهیم مقدار یک Text را به صورت خودکار بروز رسانی کنیم پس می بایست ما مقدار خود را در view model به صورت observable تعریف کنیم.

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel());

خروجی ما به صورت زیر خواهد بود:

"The day of the week is Sunday. It’s time for rest"

Observables

Knockout پراپرتی observable را به وسیله مشخص کردن خصوصیت شی با یک تابع اختصاصی با نام ko.observable() پیاده سازی می کند.

this.property = ko.observable('value')

Observables همانند یک تابع است و شما می توانید به روش زیر از آن استفاده کنید:

// To read the observable's current value, just call the observable with no parameters.
// The following will return Sunday
this.dayOfWeek()

// To write a new value to the observable, call the observable and pass the new value as a parameter.
// The following will change the day of week to Monday
this.dayOfWeek('Monday')

// To write values to multiple observable properties on a model object, you can use chaining syntax.
this.dayOfWeek('Monday').activity('work')

در Knockout نیازی نیست شما از پراپرتی observable استفاده کنید. اگر شما می خواهید یکی از مقادیرعنصرهای DOM را دریافت کنید که مقادیر آنها در شی اصلی تغییر پیدا می کند اما این عناصر پس از آن بروز رسانی نشده است، شما از شی های ساده استفاده می کنید مانند برنامه هایی که قبلا می نوشتید و وظیفه Update کردن منابع UI و پایگاه داده را خودتان بر عهده داشتید.
اگر شما بخواهید شی مبدا خود را و عنصرهای DOM مقصد را به صورت همگام (sync) و به صورت مقید دو طرفه نگه دارید پس باید با استفاده از پراپرتی observable اینکار را انجام دهید.

در بعضی شرایط ممکن است شما نیاز داشته باشید مقادیر دو یا چند observables (مشاهده پذیر) را درون یک مقادر قرار دهید. این کار را می توانید با فراخوانی توابع computed observables انجام دهید.
Computed observables ها توابعی هستند که به یک یا چند observables دیگر وابسته هستند و به محض اینکه هر یک از این وابستگی ها بروز رسانی شوند به صورت خودکار این توابع بروز خواهند شد. پراپرتی computed هنگامی که هر یک از این observables وابسته تغییر داده شوند به صورت خودکار بروز رسانی می شود. در مثال زیر computed observable مشخص شده (fullDate) هر زمانی که observables های day، month و year تغییر داده شوند بروز رسانی می شود.

<p>Day: <input data-bind="value: day" /></p>
<p>Month: <input data-bind="value: month" /></p>
<p>Year: <input data-bind="value: year" /></p>
<p>The current date is <span data-bind="text: fullDate"></span></p>


function viewModel() {
  this.day = ko.observable('24');
  this.month = ko.observable('02');
  this.year = ko.observable('2012');

  this.fullDate = ko.computed(function() {
   return this.day() + "/" + this.month() + "/" + this.year();
  },this);
};

ko.applyBindings(new viewModel());

ko.computed() یک پارامتر دوم دارد که با this مقدار دهی شده است. بدون انتقال این پارامتر نمی توانیم به this.day(), this.month() و this.year() ارجاع دهیم. به این ترتیب برای ساده سازی شما می توانید یک متغییر self ایجاد کنید، در این صورت نیازی نیست در پارامتر دوم چیزی قید کنید. از این به بعد ما از این روش برای کد نویسی استفاده خواهیم کرد. مانند مثال زیر:

function viewModel() {
  var self = this;
  self.day = ko.observable('24');
  self.month = ko.observable('02');
  self.year = ko.observable('2012');

  self.fullDate = ko.computed(function() {
   return self.day() + "/" + self.month() + "/" + self.year();
  });
};

ko.applyBindings(new viewModel());

شما وقتی با یک شی تعامل دارید می توانید به سادگی هر تغییری که بر روی شی ایجاد می شود را با استفاده کردن از یک observable بررسی و رصد کنید. اما اگر شما چندنی شی داشته باشید چطور؟ در این شرایط Knockout یک شی مخصوص دارد که ko.observableArray() است، این شی می تواند تغییرات یک مجموعه از هر چیزی را که بررسی و تعیین کند. این شی این امکان را در اختیار شما قرار می دهد تا به وسیله and/or مقادیر چندین شی را نشان دهید، برای مثال، هنگامی که شما نیاز دارید یک مجموعه و یا بخش از UI خود را برای عناصری که حذف و یا اضافه شده اند و می خواهید نماش و یا عدم نمایش داده شوند، تکرار کنید، می توانید از این ابزار استفاده کنید.
شما باید در نظر داشته باشید که یک ارایه observable وضعیت اشیا را رصد نمی کند بلکه فقط اشیایی که در آرایه اش هستند را رصد می کند. به این سادگی نیست که یک شی را در آرایه observable قرار دهید و تصور کنید که تمامی propertie های آن را observable کرده ایم. اگر شما بخواهید می توانید observable پراپرتی هایی که می خواهید را ایجاد کنید اما این وابسته به شما است. یک observable array فقط اشیایی را که نگهداری می کند، رصد می کند و شنونده ها (listeners) وقتی اشیا حذف و یا اضافه می شوند هشدار و پیامی ارسال می کنند. (مفاهیم اگر مبهم است در مثال ها سعی کنید مفاهیم را بررسی کنید) :)

this.property = ko.observableArray();

هنگامی که شما یک observable array ایجاد می کنید می توانید آن را به صورت empty و یا با مقدار دهی اولیه ایجاد کنید. در مثال زیر ما یک observable array ایجاد کردیم وسپس آن را با روزهای هفته مقداردهی کرده ایم.

<p>Today is <span data-bind="text: daysOfWeek()[0]"></span></p>

function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
  'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
  alert("The week has " + self.daysOfWeek().length + " days");
};

ko.applyBindings(new viewModel());

همانطور که مشاهده می کنید، شما می توانید برای نوشتن و خواندن ارایه Knockout از دستورات محلی (native) و توابع JavaScript استفاده کنید. اما خود Knockout توابع معادل آن را دارد و توابع Knockout نیز کمی بهتر هستند.

array().push('Some value'); // native JavaScript

array.push('Some value'); // Knockout