MIX 11淘汰賽的代碼示例和我的錯誤

Question

我從這個視頻輸入代碼示例： http://channel9.msdn.com/Events/MIX/MIX11/FRM08

但它不工作。錯字或其他錯誤在哪裏？ 我的源副本可在http://jsfiddle.net/fFedK/

HTML：

<span data-bind="text:firstName"></span><br /><br /> 
<input data-bind="value:firstName, valueUpdate: 'afterkeydown'" /><br /><br /> 

<span data-bind="text:lastName"></span><br /><br /><br /> 
<input data-bind="value:lastName, valueUpdate: 'afterkeydown'" /><br /><br /> 

<span data-bind="text:fullName"></span><br /><br /> 

<h2>Friends</h2> 

<div data-bind="template: 'friendsTemplate'"></div> 

<script id="friendsTemplate" type="text/html"> 
    <ul> 
     {{each(index, friend) friends}} 
      <li> ${ friend.name } </li> 
     {{/each}} 

    </ul> 

</script>​ 

Script代碼：

function friend(name) { 
    return { 
     name: ko.observable(name) 
    } 
} 


var viewModel = { 
    firstName : ko.observable("Mike"), 
    lastName : ko.observable("Rassel"), 

    friends : ko.observableArray([new friend("Steve"), new friend("Annie")]) 
} 

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





ko.applyBindings(viewModel); 

Answer 1

，我已經修復您的jsfiddle：

http://jsfiddle.net/qHhEV/4/

的例子是使用舊的jQuery tmpl合成器X已在很大程度上棄用，所以我已經更新了它的淘汰賽本地模板使用：

<script id="friendsTemplate" type="text/html"> 
    <ul> 
     <!-- ko foreach: friends --> 
     <li data-bind="text: name"></li>  
     <!-- /ko --> 
    </ul> 

</script> 

還有人認爲我有固定的幾個語法錯誤。

Answer 2

該示例具有jquery和jquery-tmpl庫的依賴關係。

所以，你的頁面已經加載JS庫按以下順序：1. jQuery的 2. jQuery的TMPL 3. Knockout.js

我已經聯繫到下面撥弄它的工作。不需要更改代碼：JsFiddle

但是，正如在另一個答案中指出的，應該使用更新的模板機制。 jquery-tmpl庫不再處於開發中。

您可以避免與foreach綁定在一起的模板。總體而言，我認爲這是更簡潔：JsFiddle

<ul data-bind="foreach: friends"> 
    <li data-bind="text: name"></li> 
</ul>