（更新）knockout.js学习——1.2例子——绑定的详细语法

最新推荐文章于 2018-07-27 20:34:09 发布

toFriday

最新推荐文章于 2018-07-27 20:34:09 发布

阅读量817

点赞数

分类专栏： knockOut.js

knockOut.js 专栏收录该内容

13 篇文章

订阅专栏

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

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

3、允许执行默认事件：如果你想让默认的事件继续执行，你可以在你event的自定义函数里返回true。

注4：控制this句柄

KO在调用你定义的event绑定函数时，会将view model传给this对象（也就是ko.applyBindings使用的view model）。主要是方便你在调用你在view model里定义的方法的时候可以很容易再调用view model里定义的其它属性。例如： this.someOtherViewModelProperty。

如果你想引用其它对象，我们有两种方式：

你可以和以下注1里那样使用匿名函数（没有函数名，不是function myfunc(){}，而是直接function(){}。再在{}中调用viewmodel的函数对象。），因为它支持任意JavaScript 对象。
你也可以直接引用任何函数对象。你可以使用bind使callback函数设置this为任何你选择的对象。例如：

<div data-bind="event: { mouseover: someObject.someFunction.bind(someObject) }">
    Mouse over me
</div>

如果你是C#或Java开发人员，你可以疑惑为什么我们还要用bind函数到一个对象想，特别是像调用someObject.someFunction。原因是在JavaScript里，函数自己不是类的一部分，他们在单独存在的对象，有可能多个对象都引用同样的someFunction函数，所以当这个函数被调用的时候它不知道谁调用的（设置this给谁）。在你bind之前运行时是不会知道的。KO默认情况下设置this对象是view model，但你可以用bind语法重定义它。

在注1里使用匿名函数的时候没有具体的要求，因为JavaScript代码 someObject.someFunction()就意味着调用someFunction，然后设置this到 someObject对象上。

注1：传参数给你的click 句柄

最简单的办法是传一个function包装的匿名函数：

<button data-bind="event: { mouseover: function() { viewModel.myFunction('param1', 'param2') } }">
    Click me
</button>

这样，KO就会调用这个匿名函数，里面会执行viewModel.myFunction()，并且传进了'param1' 和'param2'参数。

5、事件源

如果你需要的话，可以使用匿名函数的第一个参数（如事件源event）传进去，然后在里面调用：

<div data-bind="event: { mouseover: function(event) { viewModel.myFunction(event, 'param1', 'param2') } }">
    Mouse over me
</div>

这样，KO就会将事件源对象传递给你的函数并且使用了。

注6：防止事件冒泡

默认情况下，Knockout允许event事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了mouseover事件，那么如果你的鼠标在该元素移动的时候两个事件都会触发的。如果需要，你可以通过额外的绑定youreventBubble来禁止冒泡。例如：

<div data-bind="event: { mouseover: myDivHandler }">
    <button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
        Click me
    </button>
</div>

默认情况下，myButtonHandler会先执行，然后会冒泡执行myDivHandler。但一旦你设置了mouseoverBubble为false的时候，冒泡事件会被禁止。

一、click绑定

html：

// 绑定函数，自动查找viewmodel的函数，不用显示写viewmodel.incrementClickCounter，不用写括号

<body>

在bind之前运行时不摘掉函数被调用时，是被谁调用的，this是谁。但是一旦激活ko，ko的默认设置this是view model，也可以用bind重定义。
一、调用viewmodel的函数：this.viewmodelFunction()带上括号。
二、在html中绑定时，click后的函数不用带上括号："click:viewmodelFunction"
三、在html中绑定时，显式的调用viewmodel的函数要带上括号："click:function(){viewmodel.viewmodelFunction()}"
四、默认a的data-bind会阻止href事件。如果需要不阻止，在data-bind的click事件的函数内加上一句话：return true;
五、给viewmodel的ko观测值增加数字，是：numberOfClicks（viewmodel.numberOfClicks()+1）。
第1，使用this.viewmodelFunction()或者viewmodel.viewmodelFunction()结构都需要带上括号，不论在html中还是js中。
第2，ko观测值对应的viemodel属性实际上是个函数对象，此处的numberOfClicks就是。括号内的参数即观测值。——不理解
<p><button data-bind="click: incrementClickCounter">click</button></p>
<p> 1、传参数给click句柄</p>
<p><button data-bind="click: function(){viewModel.incrementClickCounter()}">click _1</button></p>
<p> 2、访问事件源对象</p>
<p> <button data-bind="click:myClick">click_2</button></p>
<p> 3、链接的默认动作href被阻止</p>
<a href="http://" data-bind="click:incrementClickCounter">链接</a>
<p> 3、链接的默认动作href不被阻止</p>
<a href="http://" data-bind="click: incrementClickCounterHref">链接</a>
<p>显示部分：</p>
<p data-bind ="text: numberOfClicks"></p>
<p>4、防止事件冒泡:在内层加上clickBubble:false以后，就不会执行外层clickDiv。即点击button不会触发上层的click事件。阻止了冒泡。</p>
<div data-bind="click:clickDiv">
<p><button data-bind="click:clickSpan,clickBubble:false">click bubble</button></p>
</div>
</body>

script：

二、event绑定

<body>
例子：切换是否显示，鼠标mouseout和mouseover
绑定event事件。方法：data-bind="event:{mouseover:mouseoverfun,mouseout:mouseoutfun"
<div><button data-bind="event: { mouseover: overEnabled, mouseout: outEnabled }">是否显示内容</button></div><br />
绑定,传递ko.observable参数，只能用viewModel.enabledOrNot(true)，不能用viewModel.outEnabled(true)。前面的是可观测值，参数即代表可监测的值。后面是一个函数，内部有命令语句，并不能确定参数是传递给哪个语句或传递到哪部分内容。
<div><button data-bind="event: { mouseout: function () { viewModel.enabledOrNot(true) }, mouseover: function () { alert('bubble false')}}">是否显示内容</button></div>
<div><p data-bind="visible:enabledOrNot,text:'visible'"></p></div>
</body>

三、submit绑定

提交表单时执行函数

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

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

为什么不在submit按钮上使用click绑定？

在form上，你可以使用click绑定代替submit绑定。不过submit可以handle其它的submit行为，比如在输入框里输入回车的时候可以提交表单。所以为了保持submit功能，不让click事件阻止这一功能，不用click。

四、enable绑定

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

非布尔值会被解析成布尔值。例如0和null被解析成false，2、1和非null对象被解析给true。

如果你的参数是observable的，那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是，则只会设置一次并且以后不再更新。

切换输入框是否禁用
<input type="text" data-bind="enable: toggleEnable" />
<button data-bind="click: enablefun">可用按钮</button>
<button data-bind="click: unablefun">禁用按钮</button>

script:

// ko.observable表示这个值是可观测的，可变化的。在ui上是可以变化的，UI可以监测其改变。所以才有在enablefun和unablefun中（——有其对应的viewmodel属性——函数对象——toggleEnable的传递参数——）改变其值。
toggleEnable: ko.observable(false),
enablefun: function () { this.toggleEnable(true); },
unablefun: function () { this.toggleEnable(false); }
};

// 关于 enablefun: function () { this.toggleEnable(true); }

// 在viewmodel中写函数，不可以写成：enablefun:toggleEnable(true)

// 错误1：引用viewmodel中的函数对象，要加上this，表明是viewmodel的函数对象，指定范围：this.toggleEnable(true)

// 错误2：在viewmodel中写函数，应该以函数function(){}的方式。

ko.applyBindings(viewModel);
</script>

五、disable绑定

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

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