Question

假设我有一个包含以下定义的大型JS文件：

$(document).on('focusin', '.field', function () {
    // some logic
}).on('focusout', '.field', function () {
    // some logic
});

在选择器引用#element的地方，我可以轻松地将它重构为一个knockout viewModel - 我只是为元素上的动作添加data-bind属性，并将逻辑移入viewModel。
但在那些“CSS绑定事件”布线情况下，我看不出它是如何完成的......

这里的常见/推荐做法是什么？我应该把它留在我闪亮的淘汰赛代码旁边吗？

Answer 1

您可以使用自定义绑定提供程序来使用Knockout绑定，而无需定义data-bind属性。以下是一些示例和更多信息：

Answer 2

我做的就是创建自定义绑定。

http://knockoutjs.com/documentation/custom-bindings.html

查看具有焦点的示例：

ko.bindingHandlers.hasFocus = {
    init: function(element, valueAccessor) {
        if(element.hasClass('yourClass') {
            var value = valueAccessor();
            value(true);
        }          
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value))
            element.attr('class', 'somethingElse');
        else
            element.toggleClass('somethingToToggle');
    }
};

Answer 3

我认为你所拥有的很好，也许你的问题更多的是如何组织你的代码。如果是这样，我建议您查看此code sample from tekpub，看看Rob Conery如何构建他的应用。

基本上，他使用命名空间来封装与淘汰相关的代码，并使用相同的模式来封装事件的连接。

我要查看的文件是application.js，order_editor.js和this html file，他将实例化他的东西。

您还可以使用requirejs之类的东西来加载，以便根据需要加载内容。

knockout.js可以绑定到CSS类吗？

3 个答案: