Question

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

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

Answer 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/

Knockoutjs事件绑定无法正常工作

这里是鼠标翻转和输出代码

1 个答案: