KnockoutJs官网教程学习(一)

2022-07-10 14:31:25

这一教程中你将会体验到一些用knockout.js和Model-View-ViewModel(MVVM)模式去创建一个Web UI的基础方式。

将学会如何用views(视图)和declarative bindings(声明的绑定信息)去定义一个UI的展现方式，它的数据和行为使用的ViewModels(视图模型)和observables(观测)，以及如何一切自动保持同步得益于Knockout的依赖跟踪（甚至数据的任意级联链）。

本章目录：

1）在视图中使用绑定

2）使数据可进行编辑

3）定义计算值

4）添加更多规则

1、在视图中使用绑定。

例如有一个Person视图模型，另外还需要有个视图页面用来展现Person的数据。

首先我们定义一个knockout的js视图模型
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}
 
// Activates knockout.js
ko.applyBindings(new AppViewModel());

这里我们需要注意的是我们定义好了一个ViewModel对象后需要调用Knockout的applyBindings方法来绑定视图信息，让当前页面知道我们可以在这个页面上使用这个ViewModel对象来绑定控件值。

然后我们来编写需要展现信息的页面代码
First name: todo
Last name: >todo
运行后我们会发现页面上的First Name和Last Name 分别从原来的todo变成了我们js中定义的字段值了。因为data-bind属性让knockout声明的ViewModel属性与DOM元素关联起来，我们仅仅使用text去给DOM元素指定文本内容即可。

2、使数据可进行编辑

实际的开发过程中我们并不仅限于将静态的数据进行展示，更多时候我们需要对数据进行编辑。下面我们使用value绑定我们普通的input控件来对数据进行编辑。
First name: todo
Last name: todo
First name: <input data-bind="value: firstName"/>
Last name: <input data-bind="value: lastName"/>

经过上面的代码，我们已经能够在页面上对数据进行编辑了，但是编辑后我们并没有更新相应的字段值，实际上当我们编辑某一个文本框的时候就会更新相关ViewModel中的的字段值，由于ViewModel的属性值仅仅是字符串，无法通知任何人它的值改变了，因此UI中的值还是静态的。这就是为什么Knockout有一个observables的概念（当属性值改变时会自动通知）。这样我们就需要修改一下我们的ViewModel定义我们将ViewModel修改为一下来实现相关绑定字段的自动更新功能。
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

现在修改一下文本框中的数据，我们就可以很直观的看到上面绑定了字段的值会随着文本框内容的改变而改变了。

3、定义计算值

很多情况下，我们希望拼接或者转换多个值提供给其他控件，下面我们将定义一个FullName字段值为FirstName+” ”+LastName。

Knockout有一个computed属性的概念（observable类型（例如：改变时自动通知）并且他是基于其他observable字段值计算得出的）。

下面我们修改一下我们的ViewModel对象，增加一个FullName属性。
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
    }, this);
}
 
// Activates knockout.js
ko.applyBindings(new AppViewModel());

正如你看到的，我们on个过一个回传方法给computed指定了它的值应该如何进行计算，下面我们增加一个控件用来展现FullName字段。
First name: 
Last name: 
 
First name: <input data-bind="value: firstName" />
Last name: <input data-bind="value: lastName" />
 
Full name:

现在运行后，编辑文本框你会发现页面上所有控件的值都和相关的数据保持同步。原因是得益于Knockout的自动依赖跟踪：最后一个控件的值依赖于FullName，而fullname依赖于firstName和lastName，无论是哪个通过文本框进行了修改。任何涉及到对象关联部分的操作都会影响到ViewModel对象和可见UI的变化。结果如下：

4、添加更多规则

在本节的最后，我们添加一个规则：点击一个button是将FullName修改为大写。

首先我们在ViewModel中添加一个capitalizeFullName方法用来实现这个规则。

function AppViewModel() {

    this.firstName = ko.observable("Bert");

    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {

        return this.firstName() + " " + this.lastName();

    }, this);

    this.capitalizeLastName = function() {

        var currentVal = this.fullName();        // Read the current value

        this.lastName(currentVal.toUpperCase()); // Write back a modified value

};

// Activates knockout.js

ko.applyBindings(new AppViewModel());

这里需要注意的是调用一个observable类型值得时候可以把它作为一个方法来调用，下面我们在页面上添加一个button通过click绑定来关联我们刚刚添加的ViewModel信息。
First name: 
Last name: 
 
First name: <input data-bind="value: firstName" />
Last name: <input data-bind="value: lastName" />
 
Full name: 
 
<button data-bind="click: capitalizeLastName">转换</button>

这样我们在点击转换的时候就实现了将FullName转换成大写了。

第一次发布博客感觉好正式，虽然只是将官网的教程进行了一下“汉化”，希望大家拍砖指正。

KnockoutJs官网教程学习(一),布布扣,bubuko.com

KnockoutJs官网教程学习(一)

码农公寓

1、在视图中使用绑定。

2、使数据可进行编辑

3、定义计算值

4、添加更多规则

相关文章