knockoutjs data-bind 声明式绑定整理

一、Visible绑定

1.功能

　　Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

2.示例

<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>

3.说明

　　当参数设置为一个假值(例如bool型值false、整型值0、null或者undefined)时，该绑定会设置yourElement.style.display为none，让元素隐藏。它的优先级高于任何你在CSS中定义的隐藏样式。

　　当参数设置为一个真值(例如bool型值true、不等于null、Object对象或数组)时，该绑定会去掉yourElement.style.display值，让元素显示。

　　注意，任何你在CSS中定义的样式会立即应用生效。

　　如果参数是一个observable值，visible绑定使得元素的visible状态随着参数值的变化而变化。如果参数不是observable值，visible绑定仅仅会设置元素visible状态一次，以后不会再更新。

　　注意：你可以选择使用JavaScript函数或者表达式作为参数值。这样的话，KO将会运行你的函数或者表达式，返回的结果来控制元素显示或者隐藏。

二、Text绑定

1.功能

　　Text绑定主要是让DOM元素显示参数值。

　　通常情况下，该绑定在<span>和<em>这样的元素上非常有用，而实际上你可以绑定任何元素。

2.示例

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>

3.说明

　　Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。

　　如果参数是一个observable值，text绑定将会在值变化时更新元素text内容。如果参数不是observable值，text绑定仅仅会设置元素内容一次，以后不会再更新。

　　如果你传入的不是一个值或者一个字符串（比如：你传入一个对象或者数组）那么显示的文本将是yourParameter.toString()的结果。

三、html绑定

1.功能

　　html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。

2.示例

<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>

3.说明

　　KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。

　　如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。

　　如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。

　　注意：因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全（比如显示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。

四、CSS类名绑定

1.功能

　　css绑定是添加或删除一个或多个CSS class到DOM元素上。非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）

2.示例

<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的时候，添加profitWarning CSS class到元素上，如果大于0则删除这个CSS class。

view会随着监控属性的变化自动添加或者删除元素上的CSS class。

3.说明　

　　该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。

　　你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，

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

五、Style属性绑定

1.功能

　　style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）

2.示例

<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>

　　当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。

　　view会随着监控属性的变化自动添加或者删除该元素的style值

3.说明

　　该参数是一个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值。

六、attr属性绑定

1.功能

　　这个绑定可以用于给DOM元素添加自定义属性，或绑定到已有的属性：

　　attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。

2.示例

<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>

　　呈现结果是该连接的href属性被设置为year-end.html， title属性被设置为Report including final year-end statistics。

3.说明

　　该参数是一个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>

七、foreach绑定

1.功能

　　使用此功能可以方便我们循环遍历输出某个数组、集合中的内容。

2.示例

（1）、循环遍历输出数组

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <table> 
     <thead> 
         <tr><th>First name</th><th>Last name</th></tr> 
     </thead> 
     <tbody data-bind="foreach: people"> 
         <tr> 
             <td data-bind="text: firstName"></td> 
             <td data-bind="text: lastName"></td> 
         </tr> 
     </tbody> 
 </table> 
   
 <script type="text/javascript">
     ko.applyBindings({
         people: [
             { firstName: 'Bert', lastName: 'Bertington' },
             { firstName: 'Charles', lastName: 'Charlesforth' },
             { firstName: 'Denise', lastName: 'Dentiste' }
         ]
     });
 </script>

（2）、动态增加和删除遍历节点

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <h4>People</h4> 
 <ul data-bind="foreach: people"> 
     <li> 
         Name at position <span data-bind="text: $index"> </span>: 
         <span data-bind="text: name"> </span> 
         <a href="#" data-bind="click: $parent.removePerson">Remove</a> 
     </li> 
 </ul> 
 <button data-bind="click: addPerson">Add</button>
   
 <script type="text/javascript">
     function AppViewModel() {
         var self = this;
 
         self.people = ko.observableArray([
         { name: 'Bert' },
         { name: 'Charles' },
         { name: 'Denise' }
     ]);
 
         self.addPerson = function () {
             self.people.push({ name: "New at " + new Date() });
         };
 
         self.removePerson = function () {
             self.people.remove(this);
         }
     }
 
     ko.applyBindings(new AppViewModel());
 </script>

（3）、如果我们想要输出数组中的所有元素而不是像例一中使用firstName去指定元素的话，我们可以使用$data来进行输出。比如：

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <ul data-bind="foreach: months"> 
     <li> 
         The current item is: <b data-bind="text: $data"></b> 
     </li> 
 </ul> 
   
 <script type="text/javascript">
     ko.applyBindings({
         months: ['Jan', 'Feb', 'Mar', 'etc']
     }); 
 </script>

　　当然，我们也可以使用$data来调用数组中具体的元素，比如我们要使用$data调用例1中的firstName的话，我们可以使用$data.firstName来输出firstName。

（4）、使用$index、$parent等其他的上下文属性

　　我们曾在例2中使用了$index来表示我们数组的下标，$index是Knockoutjs为我们提供的属性，我们可以直接引用，它会随着数组等下标的变化动态变化的，比如如果数组的长度减少了1，$index的值也会跟着减少的。

　　我们也可以使用$parent来使用foreach元素之外的属性，比如：

<h1 data-bind="text: blogPostTitle"></h1> 
<ul data-bind="foreach: likes"> 
    <li> 
        <b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b> 
    </li> 
</ul>

　　这里使用$parent来调用foreach循环体之外的blogPostTitle属性。

（5）、使用"as"为foreach中的元素定义别名

　　我们可以使用$data来代替数组中的元素，同时我们也可以使用as来为我们要遍历的元素起一个别名。

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <ul data-bind="foreach: { data: categories, as: 'category' }"> 
     <li> 
         <ul data-bind="foreach: { data: items, as: 'item' }"> 
             <li> 
                 <span data-bind="text: category.name"></span>: 
                 <span data-bind="text: item"></span> 
             </li> 
         </ul> 
     </li> 
 </ul> 
   
 <script>
     var viewModel = {
         categories: ko.observableArray([
             { name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] },
             { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] }
         ])
     };
     ko.applyBindings(viewModel); 
 </script>

　　在使用的时候我们要注意，起别名使用的是as:'category'而不是as:category。

（6）、在没有绑定属性的情况下使用foreach

　　有的时候我们想要循环输出一些特殊的内容，比如我们想要输入下面文本中的<li></li>标签：

<ul> 
     <li class="header">Header item</li> 
     <!-- The following are generated dynamically from an array --> 
     <li>Item A</li> 
     <li>Item B</li> 
     <li>Item C</li> 
 </ul>

　　如果我们想要循环输出上面代码中的<li></li>标签的话，我们就没有一个可以绑定foreach的元素，此时我们可以通过以下的代码来实现：

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <ul> 
     <li class="header">Header item</li> 
     <!-- ko foreach: myItems --> 
         <li>Item <span data-bind="text: $data"></span></li> 
     <!-- /ko --> 
 </ul> 
   
 <script type="text/javascript">
     ko.applyBindings({
         myItems: ['A', 'B', 'C']
     }); 
 </script>

我们使用来表示循环的开始和结束，这是一个虚拟的标签，Knockoutjs能够对其中的foreach进行绑定就好像你将foreach绑定到了一个真实的标签上一样。

（7）、默认不显示被标示为删除的元素

　　有的时候我们要跳过数组中的一些元素，此时这些元素已经被标示为删除，但并没有被真实删除，这些元素当我们使用foreach输出的时候是默认不显示的，如果我们想要这些元素显示的话，我们可以使用includeDestroyed这个选项，比如：

<div data-bind='foreach: { data: myArray, includeDestroyed: true }'> 
    ... 
</div>

八、click绑定

1.功能

　　click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。

2.示例

<div>
    You've clicked
    <span data-bind="text: numberOfClicks">
    </span>
    times
    <button data-bind="click: incrementClickCounter">
        Click me
    </button>
</div>
<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
</script>

3.说明

　　Click点击事件时所执行的函数。

　　你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如：someObject.someFunction。

　　View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写incrementClickCounter就可以了，而无需写成：viewModel.incrementClickCounter（尽管是合法的）。

　　ps：每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。

九、value 绑定

1.功能

　　value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>，<select>和<textarea>上。

　　当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。

　　注：如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。

2.示例

<p>
    Login name:
    <input data-bind="value: userName" />
</p>
<p>
    Password:
    <input type="password" data-bind="value: userPassword" />
</p>
<script type="text/javascript">
    var viewModel = {
        userName: ko.observable(""),
        // Initially blank        userPassword: ko.observable("abc"), // Prepopulate    };
        
</script>

3.说明

　　KO设置此参数为元素的value值。之前的值将被覆盖。

　　如果参数是监控属性observable的，那元素的value值将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。

　　如果你提供的参数不是一个数字或者字符串（而是对象或者数组）的话，那显示的value值就是yourParameter.toString() 的内容（通常没用，所以最好都设置为数字或者字符串）。

　　不管什么时候，只要你更新了元素的值，那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点（例如onchange事件）的时候，KO才更新这个值，但是你可以通过第2个参数valueUpdate来特别指定改变值的时机。

4.其他

valueUpdate

　　如果你使用valueUpdate参数，那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项：

　　“change”（默认值） - 当失去焦点的时候更新view model的值，或者是<select> 元素被选择的时候。

　　“keyup” – 当用户敲完一个字符以后立即更新view model。

　　“keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup，这个更新和keydown是一样的。

　　“afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。

　　上述这些选项，如果你想让你的view model进行实时更新，使用“afterkeydown”是最好的选择。

示例：

<p>
    Your value:
    <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
</p>
<p>
    You have typed:
    <span data-bind="text: someValue">
    </span>
</p>
<!-- updates in real-time -->
<script type="text/javascript">
    var viewModel = {
        someValue: ko.observable("edit me")
    };
</script>

十、event绑定

1.功能

　　event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。

2.示例

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        Mouse over me
    </div>
    <div data-bind="visible: detailsEnabled">
        Details
    </div>
</div>
<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
</script>

3.说明

　　你需要传入的是一个JavaScript对象，他的属性名是事件名称，值是你所需要执行的函数。

　　你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如：event: { mouseover: someObject.someFunction }。

　　View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写event: { mouseover: enableDetails }就可以了，而无需写成：event: { mouseover: viewModel.enableDetails }（尽管是合法的）。

　　ps：每次鼠标在第一个元素上移入移出的时候都会调用view model上的方法来toggle detailsEnabled的值，而第二个元素会根据detailsEnabled的值自动显示或者隐藏。

参考资料：http://www.aizhengli.com/knockoutjs/knockoutjs.html

posted @ 2017-08-21 14:07 一指流砂~ 阅读(12947) 评论(0) 编辑收藏举报

刷新页面返回顶部

一指流砂

认真是一种态度，优秀是一种习惯。

knockoutjs data-bind 声明式绑定整理

一、Visible绑定

1.功能

2.示例

3.说明

二、Text绑定

1.功能

2.示例

3.说明

三、html绑定

1.功能

2.示例

3.说明

四、CSS类名绑定

1.功能

2.示例

3.说明

五、Style属性绑定

1.功能

2.示例

3.说明

六、attr属性绑定

1.功能

2.示例

3.说明

七、foreach绑定

1.功能

2.示例

（1）、循环遍历输出数组

（2）、动态增加和删除遍历节点

（3）、如果我们想要输出数组中的所有元素而不是像例一中使用firstName去指定元素的话，我们可以使用$data来进行输出。比如：

（4）、使用$index、$parent等其他的上下文属性

（5）、使用"as"为foreach中的元素定义别名

（6）、在没有绑定属性的情况下使用foreach

（7）、默认不显示被标示为删除的元素

八、click绑定

1.功能

2.示例

3.说明

九、value 绑定

1.功能

2.示例

3.说明

4.其他

valueUpdate

十、event绑定

1.功能

2.示例

3.说明

参考资料：http://www.aizhengli.com/knockoutjs/knockoutjs.html

公告

3.说明　