文章出處

目錄

本節將介紹六種文本綁定方式：

  1. visible綁定
  2. text綁定
  3. html綁定
  4. css綁定
  5. style綁定
  6. attr綁定

可見文本綁定(visible)

使用visible綁定，來控制DOM元素的可見或隱藏

例子：

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>
 
<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // Message initially visible
    };
    viewModel.shouldShowMessage(false); // ... now it's hidden
    viewModel.shouldShowMessage(true); // ... now it's visible again
</script>

參數：

  • 主要技術參數

    • 當參數解析為假（例如，布爾值false，或數字值0，或者null，或undefined），則當前元素隱藏，如同CSS樣式中display:none。

    • 當參數解析為真（例如，布爾值true，或者一個非null對象或序列）中，使其成為可見的。

使用函數和表達式來控制元素的可見性

您還可以使用JavaScript函數或任意JavaScript表達式作為參數值，KO將運行你的函數/表達式，并使用結果來確定是否隱藏元素。

例如：

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>
 
<script type="text/javascript">
    var viewModel = {
        myValues: ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible
</script>

文本綁定(text)

使用text綁定到相關的DOM，以顯示視圖模型屬性的值。可用于任何DOM元素上

例如：

Today's message is: <span data-bind="text: myMessage"></span>
 
<script type="text/javascript">
    var viewModel = {
        myMessage: ko.observable() // Initially blank
    };
    viewModel.myMessage("Hello, world!"); // Text appears
</script>
 

使用函數和表達式來作為文本值

例如：

The item is <span data-bind="text: priceRating"></span> today.
 
<script type="text/javascript">
    var viewModel = {
        price: ko.observable(24.95)
    };
    viewModel.priceRating = ko.pureComputed(function() {
        return this.price() > 50 ? "expensive" : "affordable";
    }, viewModel);
</script>

也可以寫為如下等同格式：

The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.

HTML編碼

在給視圖屬性賦值時，默認KO時進行HTML編碼的，也就是說，如果賦值的是帶有DOM標記或者JS腳本的值，一律會原封不動的顯示。不會造成安全隱患或腳本注入等情況。

例如：

viewModel.myMessage("<i>Hello, world!</i>");

只會顯示<i>Hello,workld!</i>，而不是斜體文本hello world

使用無容器的text綁定

在某些情況下，可能不允許在UI中加入新的dom元素作為KO的text綁定容器，比如下邊的這個例子，如果在option元素中再加入新的span元素，將導致無法正常工作：

<select data-bind="foreach: items">
    <option>Item <span data-bind="text: name"></span></option>
</select>

在這種情況中，可以使用ko自帶的無容器綁定寫法：<!--ko--> 和 <!--/ko-->，使用這種寫法，ko會虛擬出一個容器元素作為綁定使用。

<select data-bind="foreach: items">
    <option>Item <!--ko text: name--><!--/ko--></option>
</select>

HTML綁定

次綁定方式主要用于顯示HTML相關的DOM元素，具體的講就是將包含HTML元素的視圖模型屬性渲染到UI上。例如：

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

這種方式要注意的是腳本注入攻擊，切勿將該方式用于用戶輸入。

CSS綁定

目的：

CSS綁定主要用于對DOM元素的CSS類添加或刪除，這種方式是很有用的，當然Jquery也能做到這一點。

靜態例子：

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>
 
<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
    };
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>

上述例子意思是，當視圖屬性currentProfit小于0時，將移除div元素的profitWarning的css類。

動態例子：

<div data-bind="css: profitStatus">
   Profit Information
</div>
 
<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000)
    };
 
    // Evalutes to a positive value, so initially we apply the "profitPositive" class
    viewModel.profitStatus = ko.pureComputed(function() {
        return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
    }, viewModel);
 
    // Causes the "profitPositive" class to be removed and "profitWarning" class to be added
    viewModel.currentProfit(-50);
</script>

上述例子的意思是，當currentProfit視圖屬性值小于0時，div元素的添加css類profitWarning，否則添加css類profitPositive。

注意：

你可以設置一個或多個CSS綁定，來實現多個綁定需求：

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

你甚至也可以用引號把CSS類名括起來：

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

在視圖模型屬性返回值中，0與null被視為false，非null或非零的值被視為true。

如果視圖模型屬性是一個監控屬性類型(observable)，那么之后的css綁定將根據模型屬性的值變化而變化，如果你的視圖模型屬性不是一個監控屬性，那只有第一次運行會變化，之后將不會改變。在動態CSS綁定中同樣適用該規則。

二次注意：

如果你要添加的CSS類名是my-class，如果你像下邊這種寫法的話，將沒有效果

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

因為my-class這種名字是不合法的在KO的CSS綁定中，解決這個問題最簡單的方法是加上引號：

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

Style綁定

目的：

style綁定與CSS綁定類似，只是style綁定是添加或刪除一個或多個元素樣式，例如：

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
   Profit Information
</div>
 
<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially black
    };
    viewModel.currentProfit(-50); // Causes the DIV's contents to go red
</script>

上述例子是將div元素的color樣式賦值，當currentProfit視圖模型屬性的值小于0時，賦值red，否則賦值black；

與CSS綁定一樣，style綁定也支持多個參數同時綁定。比如：

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

如果視圖模型屬性是一個監控屬性類型(observable)，那么之后的style綁定將根據模型屬性的值變化而變化，如果你的視圖模型屬性不是一個監控屬性，那只有第一次運行會變化，之后將不會改變。

注意：

如果你需要綁定一些style，例如font-weight或者text-decoration

  • 不要寫成這樣 { font-weight: someValue }; 要寫成這樣{ fontWeight: someValue }
  • 不要寫成這樣 { text-decoration: someValue }; 要寫成這樣{ textDecoration: someValue }

更多的Style綁定的KO寫法請點擊這個地址查看

attr綁定

目的：

attr綁定主要是為了通過KO設置元素的值，比如img標簽的src值，a標簽的href值和title值。例如：

<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上a標簽的href為year-end.html，設置a標簽的title為Report including final year-end statistics。

注意：

如果你像更改元素的data-something屬性的值時，不可以寫成下main這樣：

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

因為data-something是KO中不合法的標識名稱。最簡單的方法是用引號括住：

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

文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣()

E-mail轉寄