knockout簡單實用教程3

在以前的文章裏面介紹了一些KO的基本用法。包括基本的綁定方式,基本的ko的綁定語法包括text綁定，html綁定等等(若有不明請參照上兩篇文章),下面呢介紹一下關於ko的其餘方面的知識。包括比較特殊綁定方式和語法還有KO官方mapping插件的使用等等。對了在前面的文章中好像漏掉了屬性綁定的的介紹。那就先簡單介紹下。屬性綁定吧。直接上代碼。

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

這段代碼不作過多解釋了相信看過以前的文章就能明白.(支持全部的dom屬性的綁定)。

下面重點說說比較特殊的幾種綁定方式。

 

1uniquename 綁定（用的很少）

uniquename綁定確保了某一個dom元素有一個惟一的名稱屬性（name屬性），若是你沒有設置那麼會默認給一個惟一的字符串

綁定方式以下

<input data-bind="value: someModelProperty, uniqueName: true" />

在一些特殊的狀況下可能用的上好比在IE6下 單選按鈕必需要有name屬性。還有就是在 jQuery Validation 驗證能能避免驗證的和ko綁定的混淆.

 

2模板綁定 temple 綁定

能夠指定一個模版。而後把模版綁定到指定的dom元素中 ，先給出代碼下面在進行解釋

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

在script 裏面的就是模板。在模板中也能夠跟普通的綁定方式同樣的去綁定。在肯定模板後。咱們就能夠在具體的dom元素中去綁定了。

name 表明模板的id  data 則是指定具體的vm裏面的數據對象。（這裏也能夠用foreach，後面來講明）。

在模板綁定中也能夠用foreach來循環數據.下面給出代碼

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

其實它和普通的綁定沒什麼太大差異就等同於下面的綁定

<div data-bind="foreach: people">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</div>

在模板綁定中還能夠用嵌套的方式來進行綁定,通常來配合多層次的數據結構。而且能夠用as 語法來指定模型上下文中 的你要循環綁定的數據字段父級或者子級的別名, 下面給出代碼.

<ul data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"></ul>
 
<script type="text/html" id="seasonTemplate">
    <li>
        <strong data-bind="text: name"></strong>
        <ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"></ul>
    </li>
</script>
 
<script type="text/html" id="monthTemplate">
    <li>
        <span data-bind="text: month"></span>
        is in
        <span data-bind="text: season.name"></span>
    </li>
</script>
 
<script>
    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);
</script>

基本經常使用的模型綁定的方式已經給出了。還有幾種特殊的可是不經常使用的好比  afterRender ，afteradd ，beforeremove綁定等等這些並不經常使用，有想了解的朋友能夠參考官方文檔 http://knockoutjs.com/documentation/template-binding.html  

 

文章的最後在介紹一下 ko 裏面mapping插件的使用。

這個插件用起來很是簡單。

下面給個例子

在普通的綁定中咱們會這樣作。先給出普通綁定的代碼.

先建立模型綁定模型

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

    ko.applyBindings(viewModel);

綁定dom

The time on the server is: <span data-bind='text: serverTime'></span>
and <span data-bind='text: numUsers'></span> user(s) are connected.

異步或者同步獲取數據

var data = getDataUsingAjax();          // 從服務器獲取數據
//假如返回的數據格式以下

{

     serverTime: '2010-01-07' ,

     numUsers: 3

}

 

那麼咱們只要這樣把數據填充到模型裏面就完成了

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

 

那麼咱們在是用ko.mapping插件的時候怎麼操做呢？先介紹mapping 插件是幹什麼的，簡單來講就是用來模型轉換的。能夠把js對象和json對象互相轉換。

下面給出代碼示例:

var viewModel = ko.mapping.fromJS(data);//data能夠是空的js對象 這樣能夠建立一個vm模型
// data是從服務器接收到的數據
ko.mapping.fromJS(data, viewModel);//更新模型數據
 varunmapped = 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());

像這樣最後輸出的結果是 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 插件下面的地址我也一併給出 http://knockoutjs.com/documentation/plugins-mapping.html

到這裏。關於ko的系列簡單入門教程就算是告一段落了。謝謝代價的閱讀。若有疑問能夠給我留言。