在外部JavaScript文件中使用KnockoutJS ViewModel

如何在外部JS文件中創建KO.JS ViewModel，然後在html文件中使用它？這似乎是這樣一個簡單的事情，但我不能得到它的工作，並找不到任何明確的信息，如何做到這一點。如果我忽略了，我會道歉，如果有人能指出我的答案，將會刪除此內容。在外部JavaScript文件中使用KnockoutJS ViewModel

外部VM：

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代碼根本沒有運行。

來源

2013-10-24 John Stewart

你是否在你的主html中使用'''引用了你的腳本文件？ – nemesv

是的，我已經添加了它 –

你在正確的道路上。作爲@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。這只是一個變種，不需要「新」。另外，我已經在腳本的那一點上修正了括號的位置。

而且在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-24 20:28:33 Jeroen

我試過這個，它仍然無法正常工作。我甚至創建了新文件，並使用了您在此處的確切代碼以及所需的更正，但它仍然不起作用 –

道歉。首先，我應該提到要包含Knockout和jQuery。其次，你在我複製的主要腳本位中有一個錯字。第三，我的JS例程中有一個錯誤，我忘記返回命名空間，以便它再次保存。我已經[在我的答案中解決了問題]（http://stackoverflow.com/posts/19576000/revisions），請再看一下。 – Jeroen

PS。如果你說「它仍然不起作用」，如果你包含你的調試信息會有幫助，解釋的控制檯會提到所有的各種錯誤。 – Jeroen

在外部JavaScript文件中使用KnockoutJS ViewModel

回答

相關問題