knockoutjs學習筆記：文本(Text)綁定

標籤：blog   io   ar   使用   sp   java   for   on   div   

目標

主要用於顯示行內元素(<span>,<em>)的內部文本，當然也可用於其他元素。

例子

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.

在容器類綁定時，我們會想使用內部元素顯示文本，但是在knockoutjs不起作用，比如：

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

可以這樣解決：

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

這樣通過文法在元素之間抽象出來元素，編譯之後Knockout 會建立相應的元素。

knockoutjs學習筆記：文本(Text)綁定