Knockoutjs属性绑定(Bindings)之控制文本和外观(Controlling text and appearance)

上次我们通过《Knockoutjs实战开发：属性监控（Observables）和依赖跟踪（Dependency tracking ）》一文对Knockoutjs的属性监控有了初步的了解，在昨天的文章中我们只是对某个属性进行监控介绍，在Knockoutjs中也提供了数组的监控，下面我们首先对数组的监控作下介绍，然后再开始介绍Knockoutjs的属性绑定的控制文本和外观。

一、数组监控(Observable Arrays)

如果我们想要使用Knockoutjs表示多个值的话我们可以使用数组监控(Observable Arrays)来表示，形式如下：

 var myObservableArray = ko.observableArray();    
 myObservableArray.push('Some value');     

 

在第一行我们实例化了一个数组，在第二行我们向此数组中添加了一条记录，正如我们看到的那样，往数组中添加数组我们使用push方法。当然我们也可以在初始化数组的时候为其赋初值，代码如下：

 

var anotherObservableArray = ko.observableArray([ 
     { name: "Bungle", type: "Bear" }, 
     { name: "George", type: "Hippo" }, 
     { name: "Zippy", type: "Unknown" } 
 ]);

 

以上的代码我们在定义一个数组的同时为其赋了初值，这样我们就可以通过以下的方法进行数组的访问了：

 alert('The length of the array is ' + myObservableArray().length); 
 alert('The first element is ' + myObservableArray()[0]);

 

在第一行的代码中我们使用了数组的length属性来求得数组的长度，在第二行的代码中我们取得了数组的第一个值。

 Knockoutjs数组常用的方法如下：

 （1）、myObservableArray.push('Some new value')：增加一个新的元素

 （2）、myObservableArray.pop()：删除一个元素，并返回其值

 （3）、myObservableArray.unshift('Some new value')：在数组的开始处增加一个新的元素

 （4）、myObservableArray.shift()：删除数组的第一个元素，并返回其值

 （5）、myObservableArray.reverse()：反转数组的顺序

 （6）、myObservableArray.sort()：数组排序。排序规则可以由用户自己定义也可以使用默认， 默认情况下按照字母顺序或者数字的顺序进行排序。自己定义排序规则时需要接收数组  中的两个元素，并且需要返回一个数值，当此值小于0时表示第一个元素较小，当此值大于0时，表示第二个元素较小，当等于0时表示两个元素相等。示例如 下：

 myObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })

 

 （7）、myObservableArray.splice()：数组截取。例如：myObservableArray.splice(1, 3)，代表从数组的第一个元素开始，截取三个元素，并且将他们作为数组返回。

二、控制文本和外观(Controlling text and appearance)

 （1）、Visible binding

此绑定可以控制某个控件或者内容什么时候该显示，什么时候不该显示。比如：

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

 

当shouldShowMessage为true时会显示div的文本，反则不显示。并且当shouldShowMessage的值改变时，div的显示与否也会自动的改变。我们也可以使用方法来控制此组件是否显示：

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

 

上例通过数组myValues的大小来控制div组件是否显示，当长度大于0时div中的内容才会加以显示，否则不会显示。

（2）、text binding

文本绑定我们在前面一直在用，这里我们再看一下他的代码：

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

 此处使用text binding来控制span中的文本内容。当然我们在使用text binding时也可以绑定组合属性的，代码如下：

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

 

此处将组合属性priceRating绑定到了span上并加以显示逻辑可以使用以下代码替换：

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

 

将逻辑判断放到data-bind中进行，少定义了组合属性priceRating。

 （3）、HTML Binding

此功能类似我们的innerHTML功能。代码如下：

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

 

 

但是我们应尽量减少这样的代码，因为这样可能会出现相应的注入，如果非要使用不可的话，一定要在使用之前对输入的内容加以验证。

 （4）、CSS Bindings

使用此功能我们可以为我们的组件加上相应的CSS。

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

 

（5）、style bindings

使用此功能可以为我们的组件加入相应的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 
 ko.applyBindings(viewModel);
 </script>

 （6）、attr bindings

使用此功能可以为相应组件增加对应的属性，比如为<a></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") 
     }; 
 ko.applyBindings(viewModel);
 </script>

 以上示例代码来源于：www.knockoutjs.com