Использование KnockoutJS ViewModel во внешнем файле JavaScript

Как создать KO.JS ViewModel во внешнем JS-файле, а затем использовать его в html-файле? Это похоже на такую простую вещь, но я не могу заставить ее работать и не могу найти четкой информации о том, как это сделать. Если я упустил из виду, я извиняюсь и удалю это, если кто-то может указать мне на ответ.Использование KnockoutJS ViewModel во внешнем файле JavaScript

ВНЕШНЕЕ Виджей Малья:

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

Seperate 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>

EDIT Я сделал предложенные изменения. Вот как выглядит мой проект, но он все еще не работает. Кроме того, код 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 во второй строке. В этот момент это просто 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-24 20:28:33 Jeroen

Я пробовал это, и он все еще не работает. Я даже создал новые файлы и использовал точный код, который у вас здесь, с необходимыми исправлениями, и он все еще не работает. –

Извинения. Во-первых, я должен был упомянуть, чтобы включить Knockout и jQuery. Во-вторых, у вас была опечатка в основном скрипте, который я скопировал. В-третьих, у меня была ошибка в моем примере JS, я забыл вернуть пространство имен таким образом, чтобы оно снова было сохранено. Я [исправил вещи в своем ответе] (http://stackoverflow.com/posts/19576000/revisions), пожалуйста, взгляните еще раз. – Jeroen

PS. Если вы скажете «он все еще не работает», это поможет, если вы включите информацию об отладке, поясненная консоль упомянет все различные ошибки. – Jeroen

Использование KnockoutJS ViewModel во внешнем файле JavaScript

ответ

Смежные вопросы