可以将knockout.js绑定到CSS类

Can knockout.js bind to CSS classes?

本文关键字：CSS 绑定 js knockout      更新时间：2023-09-26

假设我有一个大的JS文件，其中包含如下定义:

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

在选择器引用#element的地方，我可以很容易地将其重构为一个knockout viewModel—我只需为元素的动作添加一个data-bind属性，并将逻辑移动到viewModel中。
但是在那些"CSS绑定事件"的连接情况下，我不知道如何做到....

这里常见/推荐的做法是什么?我应该把这个放在我闪亮的密码旁边吗?

您可以使用自定义绑定提供程序来使用Knockout绑定，而不必定义data-bind属性。以下是一些示例和进一步信息:

  • http://www.knockmeout.net/2011/09/ko-13-preview-part-2-custom-binding.html
  • http://jsfiddle.net/StevenSanderson/n7h2A/1/
  • 不引人注目的淘汰赛
  • https://github.com/rniemeyer/knockout-classBindingProvider
  • https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki

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

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');
    }
};

我认为你所拥有的很好，也许你的问题更多的是关于如何组织你的代码。如果是这样，我建议你看看tekpub的代码示例，看看Rob Conery是如何构建他的应用程序的。

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

我要查看的文件是application.js, order_editor.js，以及这个他实例化他的东西的html文件。

你也可以使用一些像requires这样的东西来加载你需要的东西。

相关文章：