knockout简单实用教程3

在之前的文章里面介绍了一些KO的基本用法。包括基本的绑定方式,基本的ko的绑定语法包括text绑定，html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识。包括比较特殊绑定方式和语法还有KO官方mapping插件的使用等等。对了在前面的文章中好像漏掉了属性绑定的的介绍。那就先简单介绍下。属性绑定吧。直接上代码。

%26lt;a data-bind="attr: { href: url, title: details }"%26gt;
    Report
%26lt;/a%26gt;
 
%26lt;script type="text/javascript"%26gt;
    var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("Report including final year-end statistics")
    };
%26lt;/script%26gt;

这段代码不做过多解释了相信看过之前的文章就能明白.(支持所有的dom属性的绑定)。

下面重点说说比较特殊的几种绑定方式。

%26nbsp;

1uniquename 绑定（用的不多）

uniquename绑定确保了某一个dom元素有一个唯一的名称属性（name属性），如果你没有设置那么会默认给一个唯一的字符串

绑定方式如下

%26lt;input data-bind="value: someModelProperty, uniqueName: true" /%26gt;

在一些特殊的情况下可能用的上比如在IE6下 单选按钮必须要有name属性。还有就是在%26nbsp;jQuery Validation 验证能能避免验证的和ko绑定的混淆.

%26nbsp;

2模板绑定 temple 绑定

可以指定一个模版。然后把模版绑定到指定的dom元素中 ，先给出代码下面在进行解释

%26lt;h2%26gt;Participants%26lt;/h2%26gt;
Here are the participants:
%26lt;div data-bind="template: { name: 'person-template', data: buyer }"%26gt;%26lt;/div%26gt;
%26lt;div data-bind="template: { name: 'person-template', data: seller }"%26gt;%26lt;/div%26gt;
 
%26lt;script type="text/html" id="person-template"%26gt;
    %26lt;h3 data-bind="text: name"%26gt;%26lt;/h3%26gt;
    %26lt;p%26gt;Credits: %26lt;span data-bind="text: credits"%26gt;%26lt;/span%26gt;%26lt;/p%26gt;
%26lt;/script%26gt;
 
%26lt;script type="text/javascript"%26gt;
     function MyViewModel() {
         this.buyer = { name: 'Franklin', credits: 250 };
         this.seller = { name: 'Mario', credits: 5800 };
     }
     ko.applyBindings(new MyViewModel());
%26lt;/script%26gt;

在script 里面的就是模板。在模板中也可以跟普通的绑定方式一样的去绑定。在确定模板后。我们就可以在具体的dom元素中去绑定了。

name 代表模板的id %26nbsp;data 则是指定具体的vm里面的数据对象。（这里也可以用foreach，后面来说明）。

在模板绑定中也可以用foreach来循环数据.下面给出代码

%26lt;h2%26gt;Participants%26lt;/h2%26gt;
Here are the participants:
%26lt;div data-bind="template: { name: 'person-template', foreach: people }"%26gt;%26lt;/div%26gt;
 
%26lt;script type="text/html" id="person-template"%26gt;
    %26lt;h3 data-bind="text: name"%26gt;%26lt;/h3%26gt;
    %26lt;p%26gt;Credits: %26lt;span data-bind="text: credits"%26gt;%26lt;/span%26gt;%26lt;/p%26gt;
%26lt;/script%26gt;
 
 function MyViewModel() {
     this.people = [
         { name: 'Franklin', credits: 250 },
         { name: 'Mario', credits: 5800 }
     ]
 }
 ko.applyBindings(new MyViewModel());

其实它和普通的绑定没什么太大差别就等同于下面的绑定

%26lt;div data-bind="foreach: people"%26gt;
    %26lt;h3 data-bind="text: name"%26gt;%26lt;/h3%26gt;
    %26lt;p%26gt;Credits: %26lt;span data-bind="text: credits"%26gt;%26lt;/span%26gt;%26lt;/p%26gt;
%26lt;/div%26gt;

在模板绑定中还可以用嵌套的方式来进行绑定,一般来配合多层次的数据结构。并且可以用as 语法来指定模型上下文中 的你要循环绑定的数据字段父级或者子级的别名, 下面给出代码.

%26lt;ul data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"%26gt;%26lt;/ul%26gt;
 
%26lt;script type="text/html" id="seasonTemplate"%26gt;
    %26lt;li%26gt;
        %26lt;strong data-bind="text: name"%26gt;%26lt;/strong%26gt;
        %26lt;ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"%26gt;%26lt;/ul%26gt;
    %26lt;/li%26gt;
%26lt;/script%26gt;
 
%26lt;script type="text/html" id="monthTemplate"%26gt;
    %26lt;li%26gt;
        %26lt;span data-bind="text: month"%26gt;%26lt;/span%26gt;
        is in
        %26lt;span data-bind="text: season.name"%26gt;%26lt;/span%26gt;
    %26lt;/li%26gt;
%26lt;/script%26gt;
 
%26lt;script%26gt;
    var viewModel = {
        seasons: ko.observableArray([
            { name: 'Spring', months: [ 'March', 'April', 'May' ] },
            { name: 'Summer', months: [ 'June', 'July', 'August' ] },
            { name: 'Autumn', months: [ 'September', 'October', 'November' ] },
            { name: 'Winter', months: [ 'December', 'January', 'February' ] }
        ])
    };
    ko.applyBindings(viewModel);
%26lt;/script%26gt;

基本常用的模型绑定的方式已经给出了。还有几种特殊的但是不常用的比如 %26nbsp;afterRender ，afteradd ，beforeremove绑定等等这些并不常用，有想了解的朋友可以参考官方文档%26nbsp;http://knockoutjs.com/documentation/template-binding.html%26nbsp;%26nbsp;

%26nbsp;

文章的最后在介绍一下 ko 里面mapping插件的使用。

这个插件用起来非常简单。

下面给个例子

在普通的绑定中我们会这样做。先给出普通绑定的代码.

先创建模型绑定模型

var viewModel = {
    serverTime: ko.observable(),
    numUsers: ko.observable()
}

    ko.applyBindings(viewModel);

%26nbsp;

绑定dom

The time on the server is: %26lt;span data-bind='text: serverTime'%26gt;%26lt;/span%26gt;
and %26lt;span data-bind='text: numUsers'%26gt;%26lt;/span%26gt; user(s) are connected.

异步或者同步获取数据

var data = getDataUsingAjax();          // 从服务器获取数据
//假如返回的数据格式如下

{

%26nbsp;%26nbsp;%26nbsp;%26nbsp; serverTime: '2010-01-07' ,

%26nbsp;%26nbsp;%26nbsp;%26nbsp; numUsers: 3

}

%26nbsp;

%26nbsp;

那么我们只要这样把数据填充到模型里面就完成了

// 填充模型
viewModel.serverTime(data.serverTime);
viewModel.numUsers(data.numUsers);

%26nbsp;

那么我们在是用ko.mapping插件的时候怎么操作呢？先介绍mapping 插件是干什么的，简单来说就是用来模型转换的。可以把js对象和json对象互相转换。

下面给出代码示例:

var viewModel = ko.mapping.fromJS(data);//data可以是空的js对象 这样可以创建一个vm模型
// data是从服务器接收到的数据
ko.mapping.fromJS(data, viewModel);//更新模型数据
var unmapped = ko.mapping.toJS(viewModel);//模型转换为js对象

那么我们如何使用它来绑定数据呢假设有这样一个json对象

var data = {
    name: 'Scot',
    children: [
        { id : 1, name : 'Alicw' }
    ]
}

我们可以通过它来创建一个viewmodel对象

var viewModel = ko.mapping.fromJS(data);

当有新的数据是我们可以这样来更新数据模型

var data = {
    name: 'Scott',
    children: [
        { id : 1, name : 'Alice' }
    ]
}
ko.mapping.fromJS(data, viewModel);//更新模型

当然。你也可以创建一个vm模型然后用mapping来更新你模型的数据

var data = {
    name: 'Graham',
}
 
var mapping = {
    'name': {
        update: function(options) {
            return options.data + 'foo!';
        }
    }
}
var viewModel = ko.mapping.fromJS(data, mapping);
alert(viewModel.name());

像这样最后输出的结果是%26nbsp;Grahamfoo! mapping插件还有一些其他的语法比如，你想忽略一些js对象的属性不绑定到模型上的话可以这样写。

var mapping = {
    'ignore': ["propertyToIgnore", "alsoIgnoreThis"]
}
var viewModel = ko.mapping.fromJS(data, mapping);

var oldOptions = ko.mapping.defaultOptions().ignore;
ko.mapping.defaultOptions().ignore = ["alwaysIgnoreThis"];

和它对应的是include 语法。你可以单独添加一些属性到js对象里

var mapping = {
    'include': ["propertyToInclude", "alsoIncludeThis"]
}
var viewModel = ko.mapping.fromJS(data, mapping);

var oldOptions = ko.mapping.defaultOptions().include;
ko.mapping.defaultOptions().include = ["alwaysIncludeThis"];

上面已经介绍了大部分的mapping语法了相信大家看完之后呢，应该就能够使用它了。

还有一些细节的东西大家可以去官网查看。mapping 插件下面的地址我也一并给出%26nbsp;http://knockoutjs.com/documentation/plugins-mapping.html

到这里。关于ko的系列简单入门教程就算是告一段落了。谢谢代价的阅读。如有疑问可以给我留言。

%26nbsp;