3 天学习 knockout - 第 2 天

• 下载 knockoutEx_1.rar - 184.5 KB
• 下载 knockoutEx_1.zip - 196.7 KB

 

在我上一篇文章中，我为您提供了带有简单示例的knockout.js框架的概述。

正如我所说，knockout框架帮助我们创建具有完整业务逻辑验证和简洁语法的交互式UI。今天我们将看到它是如何做到的。让我们潜入knockout的海洋，游泳并尝试在池塘（knockout）中寻找新的鱼（功能）：）

注意：Knockout.js库附带其智能感知功能，这是开发人员最喜欢的部分。如果您想了解更多关于knockout的信息，请尝试查看智能感知。

在阅读本文之前，请先阅读第一天的文章。

第 1 天

议程

1)可观察类型

1. 可观察数组
2. 可观察数组的演示示例
3. 依赖可观察对象
4. 依赖可观察对象的演示示例

2)内置绑定和自定义绑定

1. 与文本和外观相关的绑定
2. 与表单元素和事件相关的绑定
3. 控制流绑定
4. 模板

让我们开始我们的实验。在阅读本文时，请同时尝试。我也附上了演示示例解决方案。

Observables (可观察对象)

可观察数组

正如我们在第一天所见，我们创建了可观察属性，它帮助我们跟踪属性的变化，我们称之为依赖跟踪。同样，对于集合中的依赖跟踪，我们有 **observableArray**。它可以声明为

 当我提到集合时，肯定会有一些内置函数会立即出现。我将只解释observableArray的重要函数。

我设计了一个包含一些按钮和一个div来显示记录列表的网页。

向列表中添加项目

push() - observable array的此方法用于向集合中添加项目。

addclick: function () {
                    var self = this;
                    self.list.push({EmpNo: self.list().length + 1, FirstName: "Pradeep", LastName: "Shet"
 })
}

正如您所见，为了识别项目，我添加了EmpNo属性，这是一个递增的数字。

从列表中删除项目

pop() –此方法用于从列表中删除最后插入的项目。

deleteclick: function () {
                    this.list.pop();
                }

反转列表

reverse() -此方法反转列表项。

reverseclick: function () {
                    this.list.reverse();
                }

从列表中删除所有项目

removeAll() –此方法帮助我们从列表中删除所有项目。

removeallclick: function () {
                    this.list.removeAll();
                }

排序

sort() - 现在使用knockout observables array排序变得非常简单。Knockout为我们提供了使用sort方法对observable array进行排序的功能。此方法接受两个参数进行比较，即 - 假设a和b为参数，则当a==b时sort返回0，当a<b时返回<0，当a>b时返回>0。

sortclick: function (sortdirection) {
this.list.sort(
                    function (left, right) {
                        if (sortdirection == 'asc')
                            return left.EmpNo < right.EmpNo ? -1 : (left.EmpNo > right.EmpNo);
                        else
                            return left.EmpNo > right.EmpNo ? -1 : (left.EmpNo < right.EmpNo);
});

在这里，我根据Employee No.（一个递增值）进行排序。请参考**ObersvableArray.aspx**页面。

到目前为止，请忽略它如何在<li>标签中显示列表。我们将在下面的部分介绍这个主题。

依赖可观察对象

注意：在knockout 2.0之后重命名为computed，Dependent Observable是一种封装一个或多个observable的对象。

viewModel.TotalEmployees = ko.computed(function () {
                var self = this;
                return (self.list().length > 0) ? "Total Employees: " + self.list().length : "";
            }, viewModel);

在上一个代码片段中，我们将创建一个计算列来显示总员工数。ko.computed(fn,vm)接受2个参数。
1)返回依赖于其他observable的值的函数
2)代表**this**关键字的视图模型名称。

数据绑定。

内置绑定主要有四种类型。我们在我们创建的演示应用程序中已经使用了一些。

1. 文本和外观相关的绑定
   请参阅Default.aspx页面。
   • text - 自从我向您展示第一个演示以来，我们一直在使用它。我们已经用它在标签中显示Employee Name。

     <span data-bind="text: FirstName"></span>

   • html - 它会附加DOM元素的原始HTML。

     <span data-bind="html: htmlContent"></span>

   • style - 根据条件应用DOM元素的样式。

     <span data-bind="style: color:(FirstName().length > 2 : 'red' : 'blue')"></span>
     

     正如您所看到的，根据条件，我为span设置了颜色。
   • css - 要应用CSS类，我们可以使用此绑定。

   • <span data-bind="html: htmlContent, css: {clsHighlight : FirstName().length > 1}"></span>

   • 注意：1)要应用多个CSS，您可以在花括号内用逗号分隔。在这里，只有当我的名字长度大于1时，我才应用了cssclass clsHighlight。
     2) 如果您想应用任何不是合法JavaScript名称的CSS，请将该名称写在单引号中。
      <span data-bind="css: ‘cls-Highlight’ : isDisplay}"></span>
     这里cls-Highlight不是一个正确的CSS名称，但我们可以给出这种名称。在这种情况下，如所示，将其写在单引号中。
   • visible - 如果我们要使DOM元素可见或不可见，则此功能非常有用。

     <span data-bind="visible: fullAddressVisible"></span>

2. 与表单相关的绑定**​**
   请参阅Default.aspx页面。
   • click - 添加事件处理程序。

     <input type="button" value="PUSH" data-bind="click:pushclick" />

   • event - 此绑定帮助我们添加多个事件，如下所示。

     <input type="button" value="PUSH" data-bind="event: { focus: enableDetails, blur: disableDetails }" />

   • enable/disable - 此绑定用于启用/禁用DOM元素。
   • selectedOptions - 当从下拉列表或列表框中选择项目时，可以使用此绑定。
     options - 用于绑定下拉列表或列表框的列表。
     两者都接受一个数组作为输入。

     <select data-bind="options: ['India','Canada','Singapore'], selectedOptions: ['Canada']"></select>

   • value - 此绑定可用于设置DOM元素的值。

     <input type="text" name="txtFname" data-bind="value: FirstName" />

   • textInput - 这与value类似，并且适用于文本框和文本区域。但与value唯一的区别是它在键入文本框/文本区域时会立即更新模型。
3. 控制流绑定
   请参阅Default.aspx页面。
   • if - 基于条件的绑定。

     <div data-bind="if: (FirstName().length > 0)>

     在这里，我试图检查如果名字可用，才显示此>div<，否则将其保持不可见。
   • ifnot - 相同的基于条件的绑定，但检查否定。
   • foreach - 遍历集合。

     <ul data-bind="foreach: list">

     在这里，**list**是一个可迭代的observable array。
   • with - with绑定创建一个新的绑定上下文，以便后代元素在指定对象的上下文中进行绑定。假设我有一个包含FirstName、LastName、LeavesDate属性的Employees列表，其中Leaves又是LeavesDate的集合。在这种情况下，如果我想遍历Employee的Leaves集合并访问其LeavesDate，那么我们将使用**with**，它创建一个子绑定上下文并引用嵌套的视图模型数据。在视图模型中，我将添加另一个名为**Contacts**的属性。其中我将有tel、mob、fax这3个属性和一些值。现在我可以在span中像这样绑定这些值。

      <div>
            <b> Contact Nos</b>
             <br />
             Tel:<span data-bind="text: Contacts.tel"></span>
             <br />
             Mobile:<span data-bind="text: Contacts.mob"></span>
             <br />
             Fax:<span data-bind="text: Contacts.fax"></span>
      </div>
     

     另一种方式，我们可以通过使用**with**来移动我的绑定光标或上下文到后代元素，如下所示。

      <div data-bind="with: Contacts">
            <b> Contact Nos</b>
             <br />
             Tel:<span data-bind="text: tel"></span>
             <br />
             Mobile:<span data-bind="text: mob"></span>
             <br />
             Fax:<span data-bind="text: fax"></span>
         </div>
     

     这使得我的代码简洁易懂：）
4. 模板绑定
   请参阅TemplateBinding.aspx页面。
   
   • template - 脚本<script>标签内的绑定。
     假设我们要绑定集合中的一些信息。因此，在容器（即<ul>）中迭代信息时，我可以在类型为text/html的script标签内保留通用的绑定信息。下面的代码向您展示了我如何映射模板ID和脚本标签ID，以及knockout如何通过相同的绑定上下文进行迭代。这是遍历集合的一种方式。

   •  <ul data-bind="template{name: 'listtemplate', foreach: list}">
      </ul>
      <script id="listtemplate" type="text/html">
             <li data-bind="text: FirstName + ' ' + LastName + ' ' + SelectedCountry"></li>
      </script>
     

   • 无容器控制流 - 使用注释进行绑定
     这是knockout提供的一种奇怪但很好的遍历集合的技术。这里只需将代码从script标签移到容器<ul>中。
     正如您所看到的，使用**ko foreach: list**我能够遍历集合。还要关闭**/ko**。这个**ko**解释了**list**对象的绑定上下文。
     
     要记住的一点：这种基于注释的编码适用于任何绑定。例如：if、ifnot等。

   • <ul>
             <!--ko foreach: list-->
             <li data-bind="text: FirstName + ' ' + LastName + ' ' + SelectedCountry"></li>
             <!--/ko-->
     </ul>
     

到目前为止，我们已经涵盖了observable的类型和knockout中可用的内置绑定类型。您难道不认为这使我们的工作比以前编写Web应用程序时简单得多吗？

现在让我们来了解如何创建自己的绑定。

自定义绑定

如果找不到满足要求的绑定，我们可以创建自己的绑定。这可以通过扩展knockout的bindingHandler来完成。

创建自定义绑定的步骤

1. Ko.bindingHandlers.MyBindingName = { }
2. 在此绑定中设置两个对象属性：
   init – init函数在第一次评估绑定时运行。我的意思是当它被用于绑定DOM时。
   update – 只要observable值或绑定值发生更改，就会随后调用update函数。

创建一个custombinding.js文件。

/// <reference path="Scripts/jquery-1.11.1.min.js"/>
/// <reference path="Scripts/knockout.js"/>
ko.bindingHandlers.MyCustomColor = {
    init: function (element, valueAccessor, allBindingAccessor, viewModel) {
        var color = valueAccessor();
        $(element).css('background-color', 'blue');
    },

    update: function (element, valueAccessor, allBindingAccessor, viewModel) {
       var color = valueAccessor();
        var binding = allBindingAccessor().KeepTextBold;
        $(element).css({ 'background-color': color(), 'border': '1px', 'border-style': 'solid' });
        if (binding())
            $(element).css({ 'font-weight': 'bold' });
        else
            $(element).css({ 'font-weight': 'normal' });
    }
};

在CustomBinding.aspx中，

 Enter Color:  <input type="textbox" data-bind="value: setcolor" />
    <br />
    Bold Text:  <input type="checkbox" data-bind="checked: bold" />
    <div style="width:300px;height:200px" data-bind="MyCustomColor: setcolor, KeepTextBold: bold">
       This is a Custom Binding Example
    </div>
    <script type="text/javascript">
         $(function () {
             var viewModel = {
                 bold: ko.observable(true)
                 , setcolor: ko.observable('yellow')
             }
             ko.applyBindings(viewModel);
         });
    </script>

让我们尝试理解上面的代码。

我创建了一个名为MyCustomColor的自定义绑定。在init()中，我将div的默认背景色设置为蓝色。在update()中，我从绑定到某个observable的文本框中访问值，该值与我的自定义绑定器中的div绑定。因此，在文本框中键入颜色时，该颜色会反映在我的div中。同样，另一个绑定KeepTextBold也在此自定义绑定器中访问，并根据附加到复选框的observable设置文本粗体属性。

输出:

这就是您可以创建自己的自定义绑定的方法。

到这里，我结束了我的第二天文章。今天我们学习了关于knockout的许多新知识，以及它如何使我们的工作变得容易。我希望现在您能够使用基本的CRUD操作创建自己的网页。

在接下来的文章中，我们将涵盖：

1. 查找与DOM元素关联的数据
2. 绑定上下文的类型
3. JSON数据与ViewModel绑定
4. 使用WebAPI进行CRUD操作

结论

这就是knockout如何提供新的绑定，使我们的代码更小、更简洁。我们过去常说jquery有助于缩短代码量与javascript相比。但现在您可以说，与jquery相比，knockout凭借其强大的绑定概念使代码更加简洁。请分享您的评论，无论是好是坏。

有关WCF（Windows Communication Foundation）、MVC（Model View Controller）、商业智能、设计模式、WPF、TFS等各种技术培训和基础知识，请访问www.JustCompile.com。