在外部 JavaScript 文件中使用 KnockoutJS ViewModel答案

【问题标题】：Use KnockoutJS ViewModel in External JavaScript File在外部 JavaScript 文件中使用 KnockoutJS ViewModel
【发布时间】：2013-10-25 06:29:35
【问题描述】：

如何在外部 JS 文件中创建 KO.JS ViewModel 然后在 html 文件中使用它？这似乎是一件简单的事情，但我无法让它工作，也找不到任何关于如何做到这一点的明确信息。如果我忽略了，我深表歉意，如果有人能指出我的答案，我会删除它。

外部虚拟机：

var myApp = (function (myApp) {
myApp.ReportViewModel = function() {
    var self = this;
    self.test = ko.observable();
  }
}(myApp || {}));

单独的 HTML 文件：

<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<table>
    <tr>
        <td>First Name</td>
        <td><input type="text" data-bind='value: test'/></td>
    </tr>
</table>
<h2>Hello, <span data-bind="text: test"> </span>!</h2>

<!-- reference this *before* initializing -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">       </script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="myApp.js"></script>

<!-- fire off your app -->
<script>
    ($function(){
       var reportVM = new myApp.ReportViewModel();
       ko.applyBindings(reportVM);
    });
</script>

编辑我已经进行了建议的更改。这就是我的项目现在的样子，但它仍然无法正常工作。而且，knockout.js 代码根本没有运行。

【问题讨论】：

您是否在主 html 中使用 <script type="text/javascript" src="EXTERNAL.js"></script> 引用了您的脚本文件？

标签： javascript jquery knockout.js

【解决方案1】：

你走在正确的道路上。作为@nemesv cmets，您可能需要先引用外部JS，然后才能使用它。此外，我建议为您的应用创建一个命名空间对象。所有这一切看起来像这样：

<html>
<head><title>My Page</title></head>
<body>
    <table>
        <tr>
            <td>First Name</td>
            <td><input type="text" data-bind='value: test'/></td>
        </tr>
    </table>
    <h2>Hello, <span data-bind="text: test"> </span>!</h2>

    <!-- reference this first -->
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <!-- reference this *before* initializing -->
    <script src="myApp.js"></script>

    <!-- fire off your app -->
    <script>
        $(function(){
           var reportVM = new myApp.ReportViewModel();
           ko.applyBindings(reportVM);
        });
    </script>
</body>
</html>

附言。请注意，我在第二行将new reportVM 更改为reportVM。那时它只是一个 var，不需要“新建”它。另外，我已经修正了那段脚本的括号位置。

在myApp.js 有这个：

var myApp = (function (myApp) {
    myApp.ReportViewModel = function() {
        var self = this;
        self.test = ko.observable("Testing 123");
    }

    return myApp;
}(myApp || {}));

这样，ReportViewModel 和您应用的其他构造函数之类的东西就不会停留在全局命名空间中，而是会成为 myApp 对象（“命名空间”，如果你愿意的话）的一部分。

【讨论】：

我试过了，还是不行。我什至创建了新文件并使用了您在此处拥有的确切代码并进行了所需的更正，但它仍然无法正常工作
抱歉。首先，我应该提到包括 Knockout 和 jQuery。其次，您在我复制的主脚本位中有错字。第三，我的 JS 示例中有一个错误，我忘记返回命名空间以便再次保存它。我有fixed things in my answer，请再看一下。
附言。如果您说“它仍然无法工作”，如果您包含调试信息会有所帮助，解释的控制台会提到所有各种错误。
return 语句做到了。谢谢，ready 函数中的错误不在我的代码中，我在弄乱格式以使所有内容都适合代码块时在这里输入错误
Okidoki。很高兴它有帮助！