如何在我的视图中包含在单独的 javascript 文件中定义的淘汰视图模型？答案

【问题标题】：How do I include knockout viewmodel defined in separate javascript file in my view?如何在我的视图中包含在单独的 javascript 文件中定义的淘汰视图模型？
【发布时间】：2016-08-09 18:51:47
【问题描述】：

我是使用敲除的新手，我创建了一个视图模型，该模型最初在我的视图中，当我进入文本框时它工作并更新了文本，但是在我将敲除视图模型从我的视图移动到单独的 javasctipt 文件和将其包含在脚本标记中引用它的视图中，则不应用剔除绑定。我还需要做什么？我怎样才能让它工作？我不想在每个视图中都有引用剔除的脚本标签并在视图中定义视图模型，我希望视图模型位于单独的文件中。

这是我的视图模型，当我将它包含在我的视图中的脚本标签中时它起作用了。我已将其移至一个名为 UserDashboardViewModel.js 的单独文件中，并将其包含在我的视图中，但在单独的文件中时它不起作用，仅当包含在视图中时：

var viewModel = {
    monkey: ko.observable(),
    array: ko.observableArray(),
    AddAnimal: function () 
    {
        this.array.push(this.monkey());
    }
};

ko.applyBindings(viewModel);

在我看来：

<script type='text/javascript' src='~/Scripts/knockout-3.4.0.js'></script>
    <script type='text/javascript' src='~/Scripts/UserDashboardViewModel.js></script>

<h1 data-bind="text: monkey">text</h1>
... other knockout data-bindings that do not work

【问题讨论】：

这里浏览器将并行下载两个脚本并尽快执行它们，保持它们的顺序。在您的布局基础上加载淘汰赛库，然后每当您加载 View Model.js 时，您确定 @987654324 @之前加载过。
尝试将脚本标签移到正文的末尾。必须在调用 applyBindings 方法之前加载视图。
为什么不能使用window.onload 函数在其中投射ko.applyBindings？

标签： javascript knockout.js

【解决方案1】：

如果您的脚本标签在您的HTML 页面的head 中，那么您需要确保在加载DOM 时调用ko.applyBindings()。

// with jQuery 
$(document).ready(function(){ko.applyBindings(viewModel); });

// shorter jQuery version 
$(function(){ ko.applyBindings(viewModel); });

// without jQuery (doesn't work in older IEs)
document.addEventListener('DOMContentLoaded', function(){ 
    ko.applyBindings(viewModel);
}, false);

【讨论】：