Knockout.Js官網學習（style綁定、attr綁定）

Style綁定

style綁定是添加或刪除一個或多個DOM元素上的style值。比如當數字變成負數時高亮顯示，或者根據數字顯示對應寬度的Bar。（注：如果你不是應用style值而是應用CSS class的話，請參考CSS綁定。）

Style簡單示例

 

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
       Profit Information
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> 
<script type="text/javascript">
    var viewModel = {
        currentProfit:ko.observable(15000)
    };
    viewModel.currentProfit(-50);
    ko.applyBindings(viewModel);
</script>

簡單示例代碼，運行后發現為紅色的字體

當currentProfit 小於0的時候div的style.color是紅色，大於的話是黑色。

該參數是一個JavaScript對象，屬性是你的style的名稱，值是該style需要應用的值。

你可以一次設置多個style值。例如，如果你的view model有一個叫isServre的屬性，

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>

如果參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的style值。如果不是，那style值將會只應用一次並且以后不在更新。

你可以使用任何JavaScript表達式或函數作為參數。KO將用它的執行結果來決定是否應用或刪除style值。

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

 如果你需要應用font-weight或者text-decoration，你不能直接使用，而是要使用style對應的JavaScript名稱。

　 錯誤： { font-weight: someValue };            正確： { fontWeight: someValue }

    錯誤： { text-decoration: someValue };      正確： { textDecoration: someValue }

參考：style名稱和對應的JavaScript 名稱列表

attr綁定

attr 綁定提供了一種方式可以設置DOM元素的任何屬性值。你可以設置img的src屬性，連接的href屬性。使用綁定，當模型屬性改變的時候，它會自動更新。

attr綁定簡單示例

 

<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")
    };
    ko.applyBindings(viewModel);
</script>

運行后效果為

呈現結果是該連接的href屬性被設置為year-end.html， title屬性被設置為Report including final year-end statistics

該參數是一個JavaScript對象，屬性是你的attribute名稱，值是該attribute需要應用的值。

如果參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的attribute值。如果不是，那attribute值將會只應用一次並且以后不在更新。

應用的屬性名字不是合法的JavaScript變量命名

如果你要用的屬性名稱是data-something的話，你不能這樣寫：

<div data-bind="attr: { data-something: someValue }">...</div>

 因為data-something 不是一個合法的命名。解決方案是：在data-something兩邊加引號作為一個字符串使用。這是一個合法的JavaScript 對象 文字（從JSON技術規格說明來說，你任何時候都應該這樣使用，雖然不是必須的）。例如

<div data-bind="attr: { ‘data-something’: someValue }">...</div>