Knockoutjs事件绑定无法正常工作

时间:2015-05-17 16:46:14

标签: knockout.js

我正在阅读使用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);

我只是不明白我错过了什么。只是帮我弄清楚我错过了什么鼠标过滤和输出代码不起作用。谢谢

1 个答案:

答案 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/