Knockout.Js案例一Introduction

 在这第一个教程中,您将体验的一些基本知识构建的web UI Model-View-ViewModel使用knockout.js(MVVM)模式。

 

案例1：添加:data-bind 

<p>First name: <strong data-bind="text:firstName">1</strong></p>

<p>Last name: <strong data-bind="text:lastName ">todo</strong></p>

 修改视图中的两个<Strong>元素,添加数据绑定属性来显示这个人的名字:\

Js：

function AppViewModel() {
    this.firstName = "1321";
    this.lastName = "Bertington";
}

// Activates knockout.js

ko.applyBindings(new AppViewModel()); 

 

案例2： Observable

可能你不限于显示静态数据。让我们使用值绑定,以及一些常规的HTML <input>控件,使数据可编辑。

添加以下标记:

 

<p>First name:<input data-bind="value:firstName"/></p>
<p>Last name: <input data-bind="value:lastName"/></p>

 

 function AppViewModel() {

    this.firstName = "1321";
    this.lastName = "Bertington";
}

// Activates knockout.js

ko.applyBindings(new AppViewModel());

现在运行应用程序。当你编辑的文本在一个文本框? 　　

嗯…显然什么也不会发生。让我们解决……

 

实际上,当你编辑一个文本框,它更新底层视图模型数据。但由于viewmodel属性只是纯JavaScript字符串,他们没有通知任何人,他们已经改变了,所以UI保持静态。

这就是为什么KO.Js有可见的概念——这些属性,自动将问题通知每当他们的价值变化。

更新你的视图模型使firstName和lastName属性使用ko.observable可见:

 function AppViewModel() {

    this.firstName =ko.observable("1321");
    this.lastName= ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());

现在重新运行应用程序和编辑文本框。

不仅这一次你会看到底层的视图模型数据，

当你更新当你编辑,但所有相关的UI更新同步。

 

 案例3：Defining computed values典型的Computed的例子：

通常,你会想合并或将多个可观察到的值转换为让别人。在这个例子中,您可能需要定义的全名是姓氏+空间+名字。

为了处理这个问题,Ko.JS有一个computed的概念(即计算属性——这些都是引人注目的。,他们通知变化)和基于其他可见的值计算。

 

 添加一个fullName属性视图模型,通过添加下面的代码在AppViewModel,firstName和lastName下面:

 function AppViewModel() {

   this.firstName =ko.observable("1321");
    this.lastName= ko.observable("Bertington");
    this.fullName=ko.computed(function(){
    return this.firstName()+" "+this.lastName();
    })
}

ko.applyBindings(new AppViewModel());

 

HTML:

<p>First name:<input data-bind="value:firstName"/></p>
<p>Last name: <input data-bind="value:lastName"/></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>

如果你现在运行应用程序和编辑文本框时,你会发现所有UI元素(包括全称显示)与底层数据保持同步。

 

它是如何工作的? 　　

事情保持同步,因为依赖自动跟踪:过去<Strong>取决于fullName,

反过来取决于firstName和lastName,

要么可以改变通过编辑文本框。只要从对象图的任何更改造成的最小的更新都需要带上你的视图模型和可见的UI更新。

 

 

 案例4:Adding more behavior（绑定事件）

这个案例我们会为个按钮加一些行为：

  this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };

 看，可以读和写一个变量的值，我们一般叫它函数。

 

接下来,添加一个按钮到视图,使用点击绑定关联与viewmodel功能点击你只是补充道:

 <button data-bind="click: capitalizeLastName">Go caps</button>

接下来，如果你点击了按钮，会发现UI的模型值变成大写了。 

 

最后：简述MVVM

这是一个非常简单的示例,但它确实说明MVVM的一些要点: 

1.你有一个干净的,UI的面向对象表示的数据和行为(你的视图模型)ViewModel

2.另外,你有如何显示明显的声明表示，到底该怎么显示(你的视图)View

3.您可以实现任意复杂的行为只是通过更新viewmodel对象。你不必担心DOM元素需要修改/添加/删除,同步的框架会为你去做。

后续教程将带你更深!

Subsequent tutorials will take you much deeper!