龙8游戏第四章之click绑定,第四章之事件event绑定

event绑定即为事件绑定,其中的回调函数并不一定非要是视图模型的函数,event { mouseover,click后所跟的并不一定非得是视图模型的函数,click绑定主要作用是用于DOM元素被点击时调用相关JS函数,可以是任何对象的函数

目的

目的

event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数。例如keypress,mouseover或者mouseout等

click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。

例如:

例如:

Mouse over me

You've clicked 0timesClick me

源码:

源码:

<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);
}
};
ko.applyBindings(viewModel);
</script>
<div>
You've clicked  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>

如上述例子,当鼠标指针移入或者移出Mouse over
me时,对于detailsEnabled的值设定true或者false。进而控制Details的显示和隐藏。

如上述例子,没点过button被点击时都会触发incrementClickCounter
回调函数,从而更新视图状态。

和click一样,event后边所跟的格式一般为:event { mouseover:
someObject.someFunction
},其中的回调函数并不一定非要是视图模型的函数,他可以时任何对象的函数。

备注,click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数,直接引用即可。例如:click:
someObject.someFunction。

备注1:传递一个当前项目作为参数

备注1:传递一个参数

London
Paris
Tokyo
You seem to be interested in:

当您的处理程序中,UI展示了一个监控属性数组,例如:

源码:

LondonRemove
ParisRemove
TokyoRemove

<ul data-bind="foreach: places">
<li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }"> </li>
</ul>
<p>You seem to be interested in:  </p>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.lastInterest = ko.observable();
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

// The current item will be passed as the first parameter, so we know which place was hovered over
self.logMouseOver = function(place) {
self.lastInterest(place);
}
}
ko.applyBindings(new MyViewModel());
</script>

源码:

需要注意,如果你使用的是嵌套绑定上下文,比如foreach或者with,而需要处理的回调函数在视图模型中或者在父模型中,需要使用$parent或者$root前缀来进行绑定

<ul data-bind="foreach: places">
<li>

<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
// The current item will be passed as the first parameter, so we know which place to remove
self.removePlace = function(place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script>

与click绑定一样,给this取个别名比较好。

当点击remove时只会删除当前的项目,从源码上看,说明传递的是当前项目。这种在渲染集合数据的时候特别有用。

备注2:传递多个参数

需要注意两点:

此处请参考click绑定:

如果你是一个嵌套在绑定上下文,例如,如果使用foreach或with绑定,但你的处理函数是根视图模型或其他一些父模型,你需要使用一个前缀,如$parent或$root定位处理函数。
在您的视图模型,但是这是可以使用self(或其他一些变量)作为this的一个别名。

<div data-bind="event: { mouseover: myFunction }">
Mouse over me
</div>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>

备注2:传递事件对象(多参数)

封装多参数示例:

一些情况下,你可能需要访问DOM的事件对象(event),一般情况下KO会将事件对象作为第二个参数传递给函数。例如:

<div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }">
Mouse over me
</div>
<button data-bind="click: myFunction">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>

使用bind函数示例:

如果你要传递更多的参数,可以使用函数文本的方式。例如:

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

备注3:允许默认动作

还有更优雅的写法,比如使用bind函数绑定多个参数。例如:

同click绑定一样,ko禁止默认动作,比如你将event的keypress事件绑定到一个Input元素上,那这个input元素输入的值将会被keypress回调占用而无法输入任何信息。解决方案很简单,就是在回调函数中返回true即可。

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>

备注4:防止冒泡事件

备注3:允许默认点击动作

如果要防止冒泡事件,可以直接在事件绑定后附加一个youreventBubble绑定。将该附加绑定设置为false则禁止冒泡事件的发生,例如:

默认情况下,Ko会阻止任何默认动作。比如你把click绑定到一个a标签上,当点击时,浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。

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

如果你不希望这种默认的阻止动作。可以在回调函数中返回true。

备注5:Jquery互动

备注4:防止冒泡事件

以上所述是小编给大家介绍的KnockoutJS 3.X API
第四章之事件event绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

默认情况下,KO允许click绑定继续到任何高级别的事件处理。例如,父元素和子元素都有click绑定,那么这两个元素的click绑定会都被触发。

您可能感兴趣的文章:

  • KnockoutJS 3.X API
    第四章之数据控制流foreach绑定
  • KnockoutJS 3.X API
    第四章之数据控制流if绑定和ifnot绑定
  • KnockoutJS 3.X API
    第四章之数据控制流with绑定
  • KnockoutJS 3.X API
    第四章之数据控制流component绑定
  • KnockoutJS 3.X API
    第四章之click绑定
  • KnockoutJS 3.X API
    第四章之表单submit、enable、disable绑定
  • KnockoutJS 3.X API
    第四章之表单value绑定
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
  • KnockoutJS 3.X API
    第四章之表单textInput、hasFocus、checked绑定

可以使用一个附加绑定clickBubble来解决该问题:

<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>

如上述例子,myButtonHandler将被调用,而附件绑定clickBubble,并设置了false,这至使父元素的myDivHandler不会被调用。

备注5:与Jquery互动

如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:

ko.options.useOnlyNativeEvents = true;

以上所述是小编给大家介绍的KnockoutJS 3.X API
第四章之click绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • KnockoutJS 3.X API
    第四章之数据控制流foreach绑定
  • KnockoutJS 3.X API
    第四章之数据控制流if绑定和ifnot绑定
  • KnockoutJS 3.X API
    第四章之数据控制流with绑定
  • KnockoutJS 3.X API
    第四章之数据控制流component绑定
  • KnockoutJS 3.X API
    第四章之事件event绑定
  • KnockoutJS 3.X API
    第四章之表单submit、enable、disable绑定
  • KnockoutJS 3.X API
    第四章之表单value绑定
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
  • KnockoutJS 3.X API
    第四章之表单textInput、hasFocus、checked绑定