کنترل جریان bindingها

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

کنترل جریان bindingها در Knockout.js

شما می توانید با استفاده از کنترل جریان bindingها، جریان یک عنصر در view را کنترل کنید. برای این منظور چهار نوع کنترل کننده جریان وجود دارد که عبارتند از:

1.    foreach binding

2.    if binding

3.    ifnot binding

4.    with binding

از بین این چهار مورد، foeach binding و if binding بیشتر استفاده می شوند.

foreach binding

در foreach binding به ازاء هر یک از عناصر آرایه، یکبار کدهای داخل حلقه تکرار می شوند.

برای توضیح بیشتر با یک مثال شروع می کنیم. فرض کنید یک ViewModel داریم که در آن یک آرایه observable وجود دارد:

var viewModel =
{
   students: ko.observableArray
       ([
           {name :"Dan W", subject : "JavaScript" },
           { name: "Glenn B", subject: "Node" },
           { name: "Pinal D", subject: "SQL" }
      ])
}

در  ViewModel خاصیتی به نام studrnts وجود دارد که یک آرایه observable است و می توانیم آن را در View به یک جدول یا لیست متصل (bind) کنیم.

 <table>
       <thead>
           <tr>
               <th>Name</th>
               <th>Subject</th>
           </tr>
       </thead>
       <tbody data-bind="foreach: students">
           <tr>
               <td data-bind="text: name"></td>
               <td data-bind="text: subject"></td>
           </tr>
       </tbody>
   </table>

همانطور که مشاهده می کنید، foreach binding در بدنه جدول انجام می شود. به این ترتیب کدهای داخل بدنه جدول 3 بار (در این مثال) تکرار می شود. این درحالیست که 3 عنصر در آرایه observable وجود دارد.

با اجرای برنامه، جدولی با 3 سطر مشاهده می کنید.

فرض کنید می خواهیم یکسری student اضافه و حذف کنیم. برای این کار باید view model را با افزودن یک observable محاسباتی بروزرسانی کنیم تا بتوانیم آیتم های آرایه Observable را حذف و یا اضافه کنیم .

function viewModel()
       {
       var self=this;
       self.students= ko.observableArray
             ([
                 {name :"Dan W", subject : "JavaScript" },
                 { name: "Glenn B", subject: "Node" },
                 { name: "Pinal D", subject: "SQL" }
             ]);
       self.addStudent= function ()
       {
           self.students.push({ name: "dj", subject: "JavaScript" });
       };
        self.removeStudent= function ()
           {
               self.students.remove(this);
           }
       }
   ko.applyBindings(new viewModel());

هیچ چیز سختی در این ViewModel به چشم نمی خورد. فقط برای حذف و اضافه کردن studentها، یکسری observableهای محاسباتی اضافه کرده ایم. سپس می توانیم آن را به لیستی بدون شماره در یک View متصل کنیم:

<h4>Students</h4>
   <ul data-bind="foreach: students">
       <li>Name at position <span data-bind="text: $index"></span>:
       <span data-bind="text: name"></span>
           <a href="#" data-bind="click: $parent.removeStudent">Remove</a>
       </li>
   </ul>
 <button data-bind="click: addStudent">Add</button>

با اجرای برنامه مشاهده خواهید کرد که می توانید Studentها را حذف و اضافه کنید.

می توانید در foreach binding از $index، $parent و $data نیز استفاده کنید. برای مثال:

·        می توانید اندیس یک عنصر خاص را با $index بخوانید.

·        می توانید آرایه ای از عناصر (نه یک عنصر خاص) را با $data بخوانید.

·        با استفاده از $parent می توانید viewmodel والد یا سایر خصوصیات viewmodel را بخوانید.

if binding

if binding مشخص میکند کدام بخش از کد اجرا شود و کدام بخش اجرا نشود. برخلاف visible binding، if binding می تواند کد را از DOM حذف یا به آن اضافه کند. If binding وظایف زیر را بر عهده دارد:

·        حذف یا اضافه کردن کد از DOM

·        حصول اطمینان از اینکه خاصیت data-bind در کد اعمال شده است.

اجازه دهید بوسیله قطعه کد زیر در ViewModel، با عملکرد if binding آشنا شویم:

var viewModel =
{
   show : ko.observable(false)
}
ko.applyBindings(viewModel);

به شکل زیر binding را در View انجام دهید:

<label><input type="checkbox" data-bind="checked: show" />Display Div</label> 
     <div data-bind="if: show">Visible/Hide using if binding </div>

همانطور که می بینید، در Checkboxها، Cheched binding و در div، if binding انجام می شود. اگر مقدار خاصیت ViewModel غیر از false باشد، آنگاه div نمایش داده می شود (visible می شود). ورودی مقدار خاصیت نمایشی را تعیین می کند. با یک مثال دیگر به شما خواهم گفت هنگام کار کردن با nullها، چقدر if binding می تواند باشد. همانطور که می دانید بوسیله if binding می توانیم عناصری را در DOM حذف یا اضافه کنیم که به data-bind شده باشند. ViewModel زیر را در نظر بگیرید:

function viewModel() {
var self = this;
self.students = ko.observableArray
    ([
         { name: "Dan W", subject: null },
          { name: "Glenn B", subject: { music: 'guitar' } },
           { name: "Pinal D", subject: { music: 'drum' } }
     ]);
}; 

سپس if binding را به شکل زیر در View اضافه می کنیم:

<h4>Students</h4>
   <ul data-bind="foreach: students">
   <li>
       Student: <b data-bind="text: name"> </b>
       <div data-bind="if: subject">
           Subject: <b data-bind="text: subject.music"> </b>
       </div>
   </li>
</ul>

همانطور که مشاهده کردید، if binding بر روی div اعمال شده است تا subject موجود در div به نمایش درآید. در صورت غیر false بودن مقادیر، If binding می تواند آن عنصر را حذف یا اضافه کند. برای student مقدار subject برابر با null است. بنابراین این div ایجاد نمی شود. اگر این کار را با visible binding انجام می دادیم، آنگاه برای هر student ای که مقدار subject=null باشد، subject.music  منجر به پرتاب استثناء خواهد شد.

Ifnot binding

Ifnot binding هم دقیقاً مشابه if binding است. فقط مقدار ارسال شده به آن را برعکس می شود. به ViewModel زیر دقت کنید: 

 var viewModel =
       {
           display : ko.observable(false)
       }
       

و آن را بوسیله قطعه کد زیر به view متصل می کنید: 

<div data-bind="ifnot: display">
    <h1>hello</h1>
</div>

با اجرای برنامه مشاهده خواهید کرد که حتی اگر خاصیت نمایشی ViewModel، false باشد، div به DOM اضافه می شود. چون ifnot binding مقدار خاصیت ViewModel را معکوس میکند.