knockoutJS关于绑定语法

1   visible 绑定

目的

visible绑定到DOM元素上，使得该元素的hidden或visible状态取决于绑定的值。

例子

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

2   text 绑定

目的

text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示<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>

3   html 绑定

目的

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

例子

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

4   css 绑定

目的

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

例子

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

5   style 绑定

目的

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

例子

<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是红色，大于的话是黑色。

6   attr 绑定

目的

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

例子

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

7   click 绑定

目的

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

例子

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

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

8   event 绑定

目的

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

9   submit 绑定

目的

submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。

当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个，使用submit绑定就是为了处理view model的自定义函数的，而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作，你可以在你的submit句柄里返回true。

10   enable 绑定

目的

enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。

11   disable 绑定

目的

disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input，select，和textarea上非常有用。

disable绑定和enable绑定正好相反，详情请参考enable绑定。

12   value 绑定

目的

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

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

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

13   checked 绑定

目的

checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox（<input type='checkbox'>）或者radio button（<input type='radio'>） 。当用户check关联的form表单控件的时候，view model对应的值也会自动更新，相反，如果view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。

注：对text box，drop-down list和所有non-checkable的form表单控件，用value绑定来读取和写入是该元素的值，而不是checked绑定。

14   options 绑定

目的

options绑定控制什么样的options在drop-down列表里（例如：<select>）或者 multi-select 列表里 （例如：<select size='6'>）显示。此绑定不能用于<select>之外的元素。关联的数据应是数组（或者是observable数组），&lt;select>会遍历显示数组里的所有的项。

 

注：对于multi-select列表，设置或者获取选择的多项需要使用selectedOptions绑定。对于single-select列表，你也可以使用value绑定读取或者设置元素的selected项。

15   selectedOptions 绑定

目的

selectedOptions绑定用于控制multi-select列表已经被选择的元素，用在使用options绑定的<select>元素上。

当用户在multi-select列表选择或反选一个项的时候，会将view model的数组进行相应的添加或者删除。同样，如果view model上的这个数组是observable数组的话，你添加或者删除任何item（通过push或者splice）的时候，相应的UI界面里的option项也会被选择上或者反选。这种方式是2-way绑定。

注：控制single-select下拉菜单选择项，你可以使用value绑定。

16   uniqueName 绑定

目的

uniqueName绑定确保所绑定的元素有一个非空的name属性。如果该元素没有name属性，那绑定会给它设置一个unique的字符串值作为name属性。你不会经常用到它，只有在某些特殊的场景下才用到，例如：

• 在使用KO的时候，一些技术可能依赖于某些元素的name属性，尽快他们没有什么意义。例如，jQuery Validation验证当前只验证有name属性的元素。为配合Knockout UI使用，有些时候需要使用uniqueName绑定避免让jQuery Validation验证出错。

• IE 6下，如果radio button没有name属性是不允许被checked了。大部分时候都没问题，因为大部分时候radio button元素都会有name属性的作为一组互相的group。不过，如果你没声明，KO内部会在这些元素上使用uniqueName那么以确保他们可以被checked。

 

例子

<input data-bind="value: someModelProperty, uniqueName: true"/>