4

如何在外部 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 代码根本没有运行。

4

1 回答 1

4

你在正确的道路上。正如@nemesv 评论，您可能需要先引用外部 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>

PS。请注意，我更改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对象的一部分（“命名空间”，如果你愿意的话）。

于 2013-10-24T20:28:33.433 回答