javascript - 使用数据绑定(bind)加载 requirejs 模块(knockout.js)？

Question

我想要做的是使用 data-bind 属性加载 js。我对 requirejs 和 knockout 相当陌生，我不知道如何解决这个问题。

现在，我将我的 js 分为不同的 require 模块，以适应我拥有的每种类型的组件。例如，我有一个处理标题下拉列表的文件(header.js):

 define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){
     var $menu = $(".menu");
     var $dropdown = $menu.find("ul");
    $menu.on("click", function () {
       $dropdown.toggle("fast");
    });
 };     

我想做的是:

<div class="header" data-bind="headerDropdown">...</div>

并加载相应的js。

我的大多数 js 模块都是基于点击的 UI 更改(点击时显示和隐藏内容)，但我只希望 html block 位于页面上时加载 js。

希望这是有道理的!

如何使用 requirejs 和 knockout 来做到这一点？

Answer 1

看起来您正在混淆概念。首先我们看一下define()的定义(假设文件是​​headerDropdown.js):

define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){
     var $menu = $(".menu");
     var $dropdown = $menu.find("ul");
    $menu.on("click", function () {
       $dropdown.toggle("fast");
    });
 };     

1. Require.js 不建议定义显式名称的模块('headerDropdown')；您可以根据文件名获取名称。这是因为 require 有一个用于优化生产中 javascript 的工具:您可以连接并最小化输出 JS。优化器使用文件名来定义模块名称。请避免使用名称进行定义。

2. 如果您查看代码，您需要 ['jquery']，但在模块定义中您使用全局 jQuery 变量。没关系，因为 jQuery 将其模块定义为全局变量，但约定是在函数中接收 jquery 引用:

   define('headerDropdown',['jquery', 'bootstrap']),function($, bootstrap)

3. 您正在定义一个直接操作 DOM 的模块，这违背了 knockout 的 DOM 更新过程。在您的情况下，您使用的是 data-bing="headerDropwodn"因此 headerDropdown 是一个 bindingHandler 而不是一个简单的模块。请查看:http://knockoutjs.com/documentation/custom-bindings.html

4. 您可以按照您指出的问题加载要求。您只需要更改代码:

   • 在 HTML 中加载 app.js 脚本(例如)。这个app.js需要knockout和你的headerDropdown绑定(bind)处理程序。在函数声明中，您定义 ko.applyBindings 即可。

您好!