Knockout開始使用JS

Question

我目前正在開發使用ASP.NET，我想開始使用Knockout JS ......基本上我所做的是我複製粘貼了第一個教程。

所以我要把它放到我的head：

<script type="text/javascript"> 
    function() { 
     // This is a simple *viewmodel* - JavaScript that defines the data and 
     behavior of your UI 

     function AppViewModel() { 
      this.firstName = ko.observable("Bert"); 
      this.lastName = ko.observable("Bertington"); 

      this.fullName = ko.computed(function() { 
      return this.firstName() + " " + this.lastName();  
     }, this); 

     this.capitalizeLastName = function() { 
      var currentVal = this.lastName();  // Read the current value 
      this.lastName(currentVal.toUpperCase()); // Write back a modified value 
     }; 
    } 

    // Activates knockout.js 
    ko.applyBindings(new AppViewModel()); 
    }(); 
</script> 

...隨着

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script> 

在我body我放在

<!-- This is a *view* - HTML markup that defines the appearance of your UI --> 
<p> 
    First name: <strong data-bind="text: firstName"></strong> 
</p> 
<p> 
    Last name: <strong data-bind="text: lastName"></strong> 
</p> 
<p> 
    First name: 
    <input data-bind="value: firstName" /></p> 
<p> 
    Last name: 
    <input data-bind="value: lastName" /></p> 
<p> 
    Full name: <strong data-bind="text: fullName"></strong> 
</p> 
<button data-bind="click: capitalizeLastName"> 
    Go caps</button> 

的代碼是從全部採取淘汰賽JS的教程，但不知何故值不會自動綁定自己 - 在其他窩裏它不適合我。我在這裏錯過了什麼嗎？

Answer 1

如果你不想使用jQuery，你也可以：

1. 刪除您的外部自動執行功能
2. 把腳本在機身的底部參考淘汰賽視圖模型

Answer 2

它讓我看起來像你一樣，在DOM（你的HTML）被渲染之前，JavaScript代碼正在被執行。您包含在頭部的JavaScript函數會立即執行。您需要確保只在頁面完全呈現時執行此代碼。

您可以使用jQuery ready函數來做到這一點。

<script type="text/javascript"> 
    $(document).ready(function() { 
    // your existing JavaScript goes here. 
    }) 
</script> 

Answer 3

在我看來，你錯誤地使用匿名函數包裝。

您需要將更多（）添加到代碼中。

(function() { 
... 
})(); 

工作例如：http://jsfiddle.net/AlfeG/bZatD/