在 Hot Towel 应用程序中使用 Knockout 可观察到绑定(bind)

Question

我刚开始一个新的 Hot Towel SPA项目，我在使用 ViewModel 的 knockout 进行绑定(bind)时遇到了问题。

我的 View 模型如下所示:

define([
    "services/logger",
    "knockout"
],
function (logger, ko) {
    var title = ko.observable("Partners");


    return {
        title: title,
        activate: function () {
            var that = this;
            logger.log("Partners view activated", null, "admin.partners", false);

            return true;
        }
    };
});

View 看起来像这样:

<section class="row-fluid">
    <div class="span10" id="admin-content">
        <h2 class="page-title" data-bind="text: title"></h2>
    </div>
</section>

但标题总是以垃圾结尾(即函数代码，就像使用调试器时一样:FUNCTION D(){IF(0

如果我将绑定(bind)更改为“data-bind="text: title()"，它会起作用，但我意识到这不会绑定(bind)可观察对象，只会绑定(bind)值。所以在使用此类绑定(bind)处理表单时，它不会更新可观察对象，我无法保存该值。

我发现一些示例似乎使用了与我完全相同的代码，但我不明白为什么它不起作用。

Answer 1

Christian - 你自己想出来了。我会详细说明。

查看 App_Start/bundleconfig.cs 中定义的供应商包，然后查看 index.cshtml 底部附近加载的脚本(~第 29 行)。

您会看到所有第 3 方脚本(包括 knockout 脚本)都一起加载……在 Require 之前。这意味着没有任何第 3 方脚本可以检测到即将使用的 require。因此，它们将自己加载到全局命名空间(窗口)中。

当 RequireJS 出现时，它也不知道这些服务中的任何一个。因此，当您请求“ko”作为依赖项时，它会返回 null ... 如果您在函数开始的地方放置断点，您可以亲眼看到这一点。

所有这些都是设计使然。

您可以将这些服务填充到要求的等效 IoC 容器中。如果您这样做，require 将找到“ko”并且您的函数将起作用。你可以开始了解这个here .我已经做到了。还不错。

但我们中的一些人已经在这些水域中游泳了一段时间，他们认为这太像 PITA 了。因此，我们遵循 Durandal 的简化建议:“在 Require 之外加载一些第 3 方库，让它们散落在全局命名空间中；更多的应用程序文件应该位于 Require 中。”

选择其他方式并不难。只需学习在您的 main.js 中填充 require，您就可以开展业务。