knockoutJS关于绑定语法

红太狼 2022-07-28 04:11 176阅读 0赞

### 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绑定][value]来读取和写入是该元素的值，而不是checked绑定。

### 14   options 绑定 ###

**目的**

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

注：对于multi-select列表，设置或者获取选择的多项需要使用[selectedOptions][]绑定。对于single-select列表，你也可以使用[value绑定][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。

**例子**

[value]: http://www.cnblogs.com/TomXu/archive/2011/11/24/2256904.html#_value_%E7%BB%91%E5%AE%9A
[selectedOptions]: http://www.cnblogs.com/TomXu/archive/2011/11/24/2256904.html#_selectedOptions_%E7%BB%91%E5%AE%9A