knockoutjsdata-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
};
</script>
3.说明
  Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。
  如果参数是⼀个observable值，text绑定将会在值变化时更新元素text内容。如果参数不是observable值，text绑定仅仅会设置元素内容⼀次，以后不会再更新。
  如果你传⼊的不是⼀个值或者⼀个字符串（⽐如：你传⼊⼀个对象或者数组）那么显⽰的⽂本将是String()的结果。
三、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的，那元素的内容将根据参数值的变化⽽更新，如果不是，那元素的内容将只设置⼀次并且以后不在更新。
  如果你传的是不是数字或者字符串（例如⼀个对象或者数组），那显⽰的⽂本将是String()的等价内容。
  注意：因为该绑定设置元素的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的lor是红⾊，⼤于的话是⿊⾊。
  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: $vePerson">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() });
};
ve(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>:htmlbutton属性
<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>
  我们使⽤<!--ko--><!--/ko-->来表⽰循环的开始和结束，这是⼀个虚拟的标签，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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。