Question

在将knockout与requireJS一起使用时，我遇到了应用自定义绑定处理程序的问题。基本上，在过去，我已经包含了一个包含所有自定义绑定的全局绑定处理程序js文件。现在我正在使用requireJS来强制执行依赖项，我不确定如何访问这些自定义绑定。

我曾经用

创建全局函数

function KOCustomBindings() {
// Custom Bindings
ko.bindingHandlers.returnKey = {
//handler code
}
}

现在我正在使用require，我觉得我应该有一个定义语句

define(['jquery', 'knockout'],
    function($, ko)){
// Custom Bindings
return KOCustomBindings;
}
});

但是，我不相信绑定会执行，除非特别调用，也许是在垫片中？有没有人对此有任何想法？

感谢您的帮助，

Answer 1

由于自定义绑定会修改ko对象，因此只需要加载一次，并且它们的模块不需要返回任何内容。如果你的应用程序中有一个主/入口/应用程序部分，那么只需要自定义绑定和扩展程序就可以了。

define(['jquery', 'knockout'], function($, ko)){
    // Custom Bindings
    ko.bindingHandlers.returnKey = { ... }

    //NO return needed
});

然后，在你的启动部分，只需

require('lib/custom-ko-bindings');

Answer 2

一种简单的方法是将自定义绑定定义为AMD模块，并从父视图模型中获取它。示例 -

Bindings.js

define(, function () {
    ko.bindingHandlers.Date = {
        update: function (element, valueAccessor) {
            var value = valueAccessor();
            var date = moment(value());
            var strDate = date.format('MM-DD-YYYY');
            $(element).text(strDate);
        }
    };
});

您的viewmodel -

define(['jquery', 'knockout', 'bindings'],
    function($, ko, bindings)){
});

这将为您的DOM中的任何元素提供对“Date”的Knockout绑定处理程序的访问权限。（我的例子是我用过moment.js的那个）

现在，在任何需要您的父视图模型的子视图或视图中，您应该能够使用

<span data-bind="Date: myDate" />

Answer 3

我能够通过在我的绑定模块中包含knockout并返回修改后的knockout实例来实现这一点。这是我最终得到的配置：

require.config({
  paths: {
    'knockout': 'lib/knockout', // name that's only used once in customBindings.js
    'ko': 'app/customBindings'
  }
  // more config ommitted
});

我的自定义绑定：

define(['knockout'], function (ko) {
    ko.bindingHandlers.returnKey = {
        //handler code
    }
    return ko;
});

我需要淘汰的模块只需要引用'ko'。

require(['jquery', 'ko', 'underscore'], function ($, ko, _) {
    // do knockout-y things! now with bindings!
});

具有Knockout和RequireJS的自定义绑定处理程序

3 个答案: