在外部JavaScript文件中使用KnockoutJS ViewModel

问题描述：

如何在外部JS文件中创建KO.JS ViewModel，然后在html文件中使用它?这似乎很简单，但是我无法使它正常工作，也找不到任何有关如何执行此操作的明确信息.如果我忽略了我，我表示歉意，如果有人可以指出我的答案，则将其删除.

How do you create a KO.JS ViewModel in an external JS file then use it in an html file? This seems like such a simple thing but I cannot get it to work and cannot find any clear information on how to do this. If I have overlooked I apologize and will remove this if someone can point me to the answer.

外部虚拟机:

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代码根本没有运行.

EDIT I have made the suggested changes. This is what my project now looks like but it is still not working. Also the knockout.js code is not running at all.

答

您在正确的道路上.作为@nemesv注释，您可能需要先引用外部JS，然后才能使用它.另外，我建议为您的应用程序创建一个名称空间对象.所有这一切看起来像这样:

You're on the right path. As @nemesv comments you may need to reference the external JS before you can use it. In addition, I'd recommend creating a namespace object for your app. All this together would look like this:

<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.那时它只是一个变量，不需要新"它.此外，我已经将括号的位置固定在脚本的那一部分上.

PS. Note that I changed new reportVM to just reportVM in the second line. It's just a var at that point, no need to "new" it. In addition, I've fixed the parentheses placement on that bit of script.

在myApp.js中有这个:

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

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

这样，诸如ReportViewModel之类的东西以及您应用程序的其他构造函数不会在全局命名空间中徘徊，而是成为myApp对象(如果可以的话，为命名空间")的一部分.

This way things like ReportViewModel and other constructor functions for your app won't linger in the global namespace, but will be part of the myApp object ("namespace", if you will).

在外部JavaScript文件中使用KnockoutJS ViewModel

相关推荐