【Knockout.js 學習體驗之旅】（2）花式捆綁

時間 2019-12-11

標籤 knockout.js knockout 學習體驗之旅花式捆綁欄目 JavaScript 简体版

原文原文鏈接

本文是【Knockout.js 學習體驗之旅】系列文章的第2篇，全部demo均基於目前knockout.js的最新版本（3.4.0）。小茄才識有限，文中如有不當之處，還望你們指出。javascript

目錄： css

【Knockout.js 學習體驗之旅】（1）ko初體驗html

【Knockout.js 學習體驗之旅】（2）花式捆綁java

Knockout.js 的花式捆綁

提到捆綁，相信不少邪惡的筒子覺得小茄第一時間想到的是：數組

然而，並無！瀏覽器

小茄第一時間想到的是 data-bind = "value: price"，data-bind = "text: sum"，data-bind = "XX: OO"……（好吧，這有點用力過猛了）app

言歸正傳，在上一篇文章（【Knockoutjs 學習體驗之旅】（1）ko初體驗）中提到，ko中的 data-bind = "XX：OO"綁定大法除了能夠綁定text、value等內容，還能夠綁定visible、style等外觀屬性，也能夠綁定click、textInput等各類事件，甚至還能控制程序流程。各類花式捆綁，絕對知足你的幻想。ide

下面簡單講講各類綁定的使用，主要根據被綁定的屬性分紅表現類、流程類和交互類三種。函數

表現類屬性

表現類的綁定屬性有visible、text、html、css、style、attr幾種，除了css表示css的class以外，其餘都很好理解。固然了，style裏面的命名要與js一致，要去掉-改爲駝峯命名，示範以下：學習

<!--HTML code-->
<div data-bind="visible: shouldShowMessage">You will see this message only when "shouldShowMessage" holds a true value.</div>
<div>Today's message is: <span data-bind="text: myMessage"></span></div>
<div data-bind="html: details"></div>
<div data-bind="css: { profitWarning: currentProfit() < 0 }">CSS class binding test</div>
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">CSS style binding test</div>
<a data-bind="attr: { href: url, title: urltitle }">Report</a>

HTML Code

// js code
var viewModel = {
    shouldShowMessage: ko.observable(true),  // Message initially visible
    myMessage: ko.observable(),     // Initially blank
    details: ko.observable(),     // Initially blank
    currentProfit: ko.observable(150000),     // Positive value, so initially we don't apply the "profitWarning" class
    currentProfit: ko.observable(150000),     // Positive value, so initially black
    url: ko.observable("year-end.html"),
    urltitle: ko.observable("Report including final year-end statistics")
};
ko.applyBindings(viewModel);     // apply binds

JS Code

效果是這樣的：

上一篇文章裏面也說過，XXOO裏面除了傳單個的屬性，也能夠傳JSON對象，也就是說能夠組合綁定屬性，好比說：

<!--HTML code-->
<div data-bind="{visible: shouldShowMessage, text: myMessage, css: { profitWarning: currentProfit() < 0 }}">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

效果固然是這樣的：

表現類的設置比較簡單，要注意的一點就是：不少表現類的屬性並不須要動態變化，這個時候能夠利用viewModel中設置實現數據的集中初始化，可是不要把他們設置成可觀察者，如：

// js code
var viewModel = {
    shouldShowMessage: ko.observable(true),  // Message initially visible
    myMessage: '這段文字不須要動態更新'     // Initially blank
};

流程類屬性

流程類包括foreach、if、ifnot、with和比較高級的"component」綁定，if 和 ifnot 與 visible相似，差異就是：if 會直接從DOM中移除相應的組件，而visible只是控制隱藏顯示（注意是增減display: none，而不是CSS裏面的visible），組件仍是在DOM裏面的。with 跟 js 中的 with 也是同樣的效果，就是延長了做用域鏈，簡單的來講就是在變量前加了個’前綴.’。這裏只介紹一下foreach，component放到和模板綁定一塊兒介紹。

看看代碼：

<!--HTML code-->
<p>測試foreach綁定</p>
<ul data-bind="foreach: people">
<li>
    No.<span data-bind="text: $index"> </span>
    people's name: <span data-bind="text: name"> </span>
    <a href="#" data-bind="click: $parent.removePeople">RemovePeople</a>
    <a href="#" data-bind="click: remove">Remove</a>
</li>
</ul>
<input type="button" data-bind="click: addPeople" value="Add" />

HTML Code

var listModel = function () {
    //設置people數組的值（people其實是函數數組），使用foreach能夠遍歷數組對象
    //ul,li對應的是 people和people的子項，因此在li內部綁定時，做用域是在people子項{name……}中，爲了調用people外部的removePeople須要用到$parent
    //若是是調用內部的remove，remove中的this爲{name……}對應當前li項，做用域爲當前域則不用加 $parent。
    this.people = ko.observableArray([
        {name: "Mark Zake", remove: function () {
            that.people.remove(this);    //注意當前對象（就是{name……}）和做用域，不用管HTML標籤，純js理解就簡單了
        }},
        {name: "James Lebo", remove: function () {
            that.people.remove(this);
        }},
        {name: "Green Deny", remove: function () {
            that.people.remove(this);
        }}
    ]);

    //addPeople內部調用了同級people的方法，this會發生改變，應該預先保存this傳進去。
    var that = this;
    this.addPeople = function () {
        that.people.push({
            name: new Date().toDateString(),
            remove: function () {
                that.people.remove(this);
        }});
    };

    //remove的對象是整個 li標籤，也就是 a標籤的父對象。實際上要執行的是 listModel.people.remove(a.parent)
    this.removePeople = function() {
        that.people.remove(this);
    }
};

ko.applyBindings(new listModel());

JS Code

這裏比較容易搞混的是DOM節點與ViewModel的層次對應關係。首先，在ul上應用 foreach 綁定，也就是每一個 li 對應每一個 people 子項。這一點對應上了以後，就按照 js 的做用域規則去理解便可。說到做用域，不得不提 this，正所謂我待this如初戀，this坑我千百遍。這裏小茄在官方版本上加了個remove函數，與官方的removePeople對應起來看就簡單了。至於$index, $parent這些變量，按字面意思理解便可。

交互類屬性

終於要到重點了，使用ko的最重要緣由就是爲了處理動態交互的UI展示問題，這裏集中介紹一下與表單相關的一些綁定。

（1） click綁定

語法：data-bind="click: clickHandler"，這裏的clickHandler函數能夠是任意函數，並不必定要是ViewModel裏的函數，只要能引用到便可。關於click事件有幾點須要留意的：

1. 參數傳遞，ko默認將當前組件做爲第一個參數傳給clickHandler函數，這裏要注意當前的綁定上下文，好比說在with環境中，傳回的組件就會變成with組件而不是你想要的當前組件。若是你還須要傳遞event參數，則將event做爲第二個參數傳入。若是還須要傳入更多的參數，那麼就須要使用一個函數包裝起來了。如：

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
    Click me
</button>

2. 默認行爲的設置（好比連接）

ko默認是禁止默認事件行爲的，一般咱們爲連接綁定點擊事件也不會是讓其跳轉的。不過你若是必定要開啓的話，直接在clickHandler裏面return true便可。

3. 冒泡

ko默認是容許冒泡的，你能夠經過 data-bind="click: clickHandler, clickBubble: false"來設置click事件不冒泡。

（2）event綁定

ko提供了這個接口讓用戶自定義綁定事件。關於參數傳遞、默認行爲、冒泡等與click綁定是同樣的，使用案例：

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        Mouse over me
    </div>
    <div data-bind="visible: detailsEnabled">
        Details
    </div>
</div>

<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel);
</script>

JS Code

（3）submit綁定

主要用來作一些驗證表單的工做。ko會阻止默認的提交表單動做，並轉入submit綁定的函數中。後續須要提交的時候，在綁定事件中 return true便可。

PS：爲何不在表單中使用 click 事件來處理呢？由於 submit 原本就是被設計用來處理提交事件的，它還能接受回車一類的提交動做，但click則不行。

（4）value 與 textInput 綁定

在輸入框綁定 value 和 textInput 看起來效果差很少，可是更推薦使用 textInput 事件進行綁定，由於 textInput 是新增的專門用來處理輸入事件的。在上一篇文章中能夠看到，使用 value 綁定時（左）輸入以後必需要將焦點從輸入框中移出纔會進行更新，而 textInput （右）是立刻進行更新的。

雖然，value 綁定也能夠經過設置 data-bind="{value: price, valueUpdate: 'afterkeydown'}" 實現與 textInput 同樣的效果，可是這個在瀏覽器中的兼容性並不如 textInput 好。

（5）options綁定（selectedOptions）

在下拉列表中可以使用 options 來綁定子項的值，子項既能夠是字符串，也能夠是 js 對象。上一篇（【Knockoutjs 學習體驗之旅】（1）ko初體驗）中展現的是字符串，此次就來傳個對象：

代碼：

<p>Your country:
    <select data-bind="options: availableCountries,
        optionsText: 'countryName',
        value: selectedCountry,
        optionsCaption: 'Choose...'"></select>
</p>
<div data-bind="visible: selectedCountry">
    <!-- Appears when you select something -->
    You have chosen a country with population
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>

<script type="text/javascript">
    // Constructor for an object with two properties
    var Country = function(name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };
    var viewModel = {
        availableCountries: ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ]),
        selectedCountry: ko.observable() // Nothing selected by default
    };
    ko.applyBindings(viewModel);
</script>

View Code

這裏使用了option來綁定列表框的選項，使用value綁定選中項目。因爲選項是 js 對象，因此要用一個 optionText 來指定在列表框中的展現。optionCaption是指無選中任何項目時候的默認顯示值。若是咱們設定的是多選列表框的話，那麼就不能用 value 來綁定選中項目了，這個時候要用到 selectOptions來綁定選中項目。

（6）其餘綁定：enable/disable, hasFocus , checked , uniqueName。

這些事件用起來很是簡單，就不具體介紹了。最後一個 uniqueName 是用來設置表單控件的惟一 name 屬性的，表單中提交到後臺時，沒有設置 name 屬性的值時不會被提交到後臺的，因此就有了這麼個綁定功能。官網中關於 hasFoucus 還有個比較經常使用的效果：

Name:

Click the name to edit it; click elsewhere to apply changes.

點擊上面的姓名就能夠變成可編輯狀態，失去焦點後又變成普通文字，這種效果用ko實現起來至關簡單。