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>