麻煩創建jsfiddle與淘汰賽

Question

我想創建一個jsfiddle使用淘汰賽，但我不斷收到一個錯誤，說ko是未定義的。我包括一個鏈接到淘汰賽，不知何故jsfiddle沒有正確地選擇它。 我在做什麼錯？

broken fiddle

var viewModel = { 
self: this, 
BudgetLine: ko.observableArray([ 
    { 
    Id: 1, 
    Title: "Budget #1", 
    Account: ko.observableArray([ 
     { 
     Id: 1, 
     Value: ko.computed(function(item) { 
      return self.Accounts[this.Id]; 

     })}, 
    { 
     Id: 2, 
     Value: ko.computed(function(item) { 
      return self.Accounts[this.Id]; 

     })} 

    ])}, 
{ 
    Id: 2, 
    Title: "Budget #2", 
    Account: ko.observableArray([ 
     { 
     Id: 1}, 
    { 
     Id: 2} 


       ])}]), 

Accounts: ko.observableArray([ 
    { 
    Id: 1, 
    Title: "Account #1"}, 
{ 
    Id: 2, 
    Title: "Account #2"}, 
{ 
    Id: 3, 
    Title: "Account #3"}, 
{ 
    Id: 2, 
    Title: "Account #1"} 

    ]) 

};

ko.applyBindings（viewModel）;

Answer 1

您正確調用KO庫，但您的視圖模型是錯誤的

我叉你的榜樣，並修剪下來向你展示一個簡單的例子是，KO庫正確調用http://jsfiddle.net/rYJGB/

<table> 
    <tbody data-bind="template: {name: 'budgets', foreach: BudgetLine}"></tbody> 
</table> 
<script id='budgets' type="text/html"> 
    <tr> 
     <td><input type="text" data-bind="value:Title"></td> 
    </tr> 
</script> 


var viewModel = { 
    self: this, 
    BudgetLine: ko.observableArray([ 
     { Id: 1,Title: "Budget #1"  }, 
     Id: 2,Title: "Budget #2"  } 
     ]) 
}; 
ko.applyBindings(viewModel); 

Answer 2

有代碼中存在很多javascript錯誤。

我已經分手了jsFiddle。由於視圖中存在其他元素，這些元素不存在於視圖模型中，因此會顯示相同的錯誤。我故意這樣離開它，這樣你就可以從你停下的地方繼續。如何實現它的基本想法是存在的。

的的jsfiddle存在http://jsfiddle.net/rupesh_kokal/k7LHu/3/

下面是視圖（或HTML）：

  <table> 

       <tbody data-bind="template: {name: 'budgets', foreach: BudgetLine}"> 
       </tbody> 
      </table> 
      <script id='budgets' type="text/html"> 
       <tr> 
        <td> 
         <input type="text" data-bind="value:Title"></input> 
        </td> 
        <td> 
         <input type="text" data-bind="value:Amount"></input> 
        </td> 

        <td> 
         <span data-bind="text:Modified" /> 
        </td> 
        <td> 
         <select data-bind="options:$root.Account,optionsCaption:'select Account', optionsText:'Title', OptionsValue:'Id', selectedOptions:Account().Id",size="5", multiple="true"></select>       

        </td> 
        <td> 
         <span data-bind="text:CostCenterId"></span> 
        </td> 
        <td> 
         <select data-bind="options:$root.Costcenter,optionsCaption:'cost center', optionsText:'Title', optionsValue:'Id', value:CostCenterId "></select>       
         </td> 
        <td> 
         <span data-bind="text:CostCenter().Company().Title"></span> 
        </td> 

        <td> 
         <input type="button" data-bind="click: $root.deleteItem" value="Delete" /> 
         <input type="button" data-bind="click: $root.saveItem" value="save" /> 
        </td> 

       </tr> 
      </script> 

下面是視圖模型：

function ModViewModel() { 
    var self = this; 
    self.Accounts = ko.observableArray([ 
     { 
     Id: 1, 
     Title: "Account #1"}, 
    { 
     Id: 2, 
     Title: "Account #2"}, 
    { 
     Id: 3, 
     Title: "Account #3"}, 
    { 
     Id: 2, 
     Title: "Account #1"} 

     ]); 
    self.BudgetLine = ko.observableArray([]); 

    self.BudgetLine.push(new BudgetLineItem(1, "Budget #1", [1, 2], self)); 
    self.BudgetLine.push(new BudgetLineItem(2, "Budget #2", [1, 2], self)); 

} 


function BudgetLineItem(id, title, accountIds, parentModel) { 
    var self = this; 
    self.Id = id; 
    self.Title = title; 
    self.Account = ko.observableArray([]); 

    if (accountIds.length > 0) { 
     for (var i = 0, len = accountIds.length; i < len; i++) { 
      self.Account.push(new AccountLineItem(accountIds[i], parentModel)); 
     } 
    } 
    else { 
     self.Account.push(new AccountLineItem(accountIds, parentModel)); 
    } 
} 


function AccountLineItem(id, rootModel) { 
    var self = this; 
    self.Id = id; 
    self.Value = ko.computed(function() { 
     return rootModel.Accounts()[self.Id]; 
    }); 

} 



ko.applyBindings(new ModViewModel());​