0

我是 Require 的新手，也是 Knockout 的新手。现在我正在尝试将我的 Knockout 视图模型集成到 Reuire.js 架构中。

我有 5 个 js 文件：

  • /scripts/require.js
  • /scripts/jquery-2.0.3.js
  • /scripts/knockout-2.2.0.js
  • /scripts/app.js
  • /scripts/ko-model/MyViewModel.js

这就是我从 index.html 调用 require.js 的方式：

<script data-main="/scripts/app" src="/scripts/require.js"></script>

这是入口点脚本 app.js：

require.config({
    baseUrl: "/scripts",
    paths: {
        "jquery": "jquery-2.0.3",
        "knockout": "knockout-2.2.0",
        "MyViewModel": "./ko-model/MyViewModel"
    }
});

require([
    "jquery",
    "knockout",
    "MyViewModel"
],
    function ($, ko, MyViewModel) {
        // LOGIC:
        $(function () {
            ko.applyBindings(
                new MyViewModel(),
                $("#myId")
            );
        });        
    });

这是 MyViewModel.js 模块：

define(
    'MyViewModel',
    ["knockout"],
    function (ko) {
        return function MyViewModel() {
            // MyViewModel implementation
            ...
        };
    });

这对我来说很好。但。

正如您在 app.js 中看到的，我有：

function ($, ko, MyViewModel) {
    // LOGIC:
    $(function () {
        ko.applyBindings(
            new MyViewModel(),
            $("#myId")
        );
    });
}

我不喜欢这样。我宁愿不要在这里使用 jQuery 并以某种方式指定淘汰赛上下文：

function ($, ko, MyViewModel) {
    // LOGIC:
    ko.applyBindings(
        new MyViewModel(),
        document.getElementById("myId")
    );
}

但在这种情况下，淘汰赛绑定不起作用。似乎document.getElementById("myId")在这里不起作用。我不知道为什么。（我最好的猜测是调用 ko.applyBindings() 时该文档尚未加载）。

因此我有下一个问题：

如何在 LOGIC 部分中使用 jQuery 进行转义，但仍指定淘汰赛上下文？

对于改进我的代码的任何建议，我将不胜感激。

4

1 回答 1

1

是的，它找不到 id，因为很可能文档还没有完成加载。如果<script>s 在<head>. 您需要友好的解决方案是domReady 插件。从文档：

require(["jquery", "knockout", "MyViewModel", "domReady"],
function($, ko, MyViewModel, domReady) {
    domReady(function () {
        // your code here, document is initialized
    });
});
于 2013-10-09T11:43:59.987 回答