Knockout.Js官網學習（html綁定、css綁定）

Html綁定

html綁定到DOM元素上，使得該元素顯示的HTML值爲你綁定的參數。若是在你的view model裏聲明HTML標記而且render的話，那很是有用。

簡單示例

<div data-bind="html: details"></div> 
<script type="text/javascript">   
    var viewModel = {        
        details: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");

</script>

這樣Html 的EM標籤就會顯示於此

KO設置該參數值到元素的innerHTML屬性上，元素以前的內容將被覆蓋。

若是參數是監控屬性observable的，那元素的內容將根據參數值的變化而更新，若是不是，那元素的內容將只設置一次而且之後不在更新。

若是你傳的是否是數字或者字符串（例如一個對象或者數組），那顯示的文本將是yourParameter.toString()的等價內容。

關於HTML encoding

 由於該綁定設置元素的innerHTML，你應該注意不要使用不安全的HTML代碼，由於有可能引發腳本注入攻擊。若是你不確信是否安全（好比顯示用戶輸入的內容），那你應該使用text綁定，由於這個綁定只是設置元素的text 值innerText和textContent。

Css綁定

 css綁定是添加或刪除一個或多個CSS class到DOM元素上。 很是有用，好比當數字變成負數時高亮顯示。（注：若是你不想應用CSS class而是想引用style屬性的話，請參考style綁定。）

簡單示例

<p style="background: gray; color: #ffffff; font-size: 18pt;">Html綁定</p>

<script type="text/javascript">   
    var viewModel = {        
        details: ko.observable(),
        currentProfit: ko.observable(150000)
    };
    ko.applyBindings(viewModel);
    viewModel.currentProfit(-50);
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");

</script>  

運行後的效果爲

記得還寫了一個css樣式

.profitWarning {
    color: red;
}

 該參數是一個JavaScript對象，屬性是你的CSS class名稱，值是比較用的true或false，用來決定是否應該使用這個CSS class。

  你能夠一次設置多個CSS class。例如，若是你的view model有一個叫isServre的屬性，

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

   若是參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的CSS class。若是不是，那CSS class將會只添加或者刪除一次而且之後不在更新。

    你能夠使用任何JavaScript表達式或函數做爲參數。KO將用它的執行結果來決定是否應用或刪除CSS class。

應用的CSS class的名字不是合法的JavaScript變量命名

若是你想使用my-class class，你不能寫成這樣：

<div data-bind="css: { my-class: someValue }">...</div>

 由於my-class不是一個合法的命名。解決方案是：在my-class兩邊加引號做爲一個字符串使用。這是一個合法的JavaScript 對象 文字（從JSON技術規格說明來講，你任什麼時候候都應該這樣使用，雖然不是必須的）。例如

<div data-bind="css: { 'my-class': someValue }">...</div>