我正在阅读使用Knockoutjs将鼠标粘贴在一起的方法然后我得到了一个页面http://knockoutjs.com/documentation/event-binding.html
从这里我得到了一个代码,用于在Knockoutjs中使用事件绑定来附加鼠标。我尝试将代码粘贴到jsfiddle中并尝试运行但是当我运行代码时没有任何反应。这是jsfiddle链接https://jsfiddle.net/tridip/6u4veobj/
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
var viewModel = {
detailsEnabled: ko.observable(false),
enableDetails: function() {
alert('over');
this.detailsEnabled(true);
},
disableDetails: function() {
alert('out');
this.detailsEnabled(false);
}
};
ko.applyBindings(viewModel);
我也尝试运行以下不同的代码用于mouseout和over,这也不起作用。代码如下
<ul data-bind="foreach: items">
<li data-bind="text: name, event: { mouseover: toggle, mouseout: toggle }, css: { hover: selected }"></li>
</ul>
var Item = function(name) {
this.name = ko.observable(name);
this.selected = ko.observable(false);
this.toggle = function() {
this.selected(!this.selected());
}
};
var viewModel = {
items: ko.observableArray([
new Item("one"),
new Item("two"),
new Item("three")
])
};
ko.applyBindings(viewModel);
我只是不明白我错过了什么。只是帮我弄清楚我错过了什么鼠标过滤和输出代码不起作用。谢谢
答案 0 :(得分:1)
调试此类问题时要采取的第一步是按 F12 打开浏览器的开发人员工具以检查错误。
以下是我在运行jsfiddle时在调试工具控制台中看到的错误:
混合内容:页面位于 'https://fiddle.jshell.net/tridip/6u4veobj/show/'被加载了 HTTPS,但请求一个不安全的脚本 'http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js'。 此请求已被阻止;内容必须通过HTTPS提供。 (索引):27未捕获的ReferenceError:未定义ko
因此,要么更新您的Knockout cdnjs链接以使用https
,要么使用http
访问您的jsfiddle,以便页面和ko脚本下载使用相同的协议:
http://jsfiddle.net/tridip/6u4veobj/