Knockout.js hollaと同等の例

Question

Holla https://github.com/maccman/holla/commits/master/appの行に沿ってknockout.jsのより複雑な例がありますか？

左側のペインに、右側のペインにフォームを入力するリスト/ツリーが必要です。

Answer 1

ここにマスター/詳細アプリのスケルトンがあります。あなたはこれがjsfiddleに生きているのを見ることができます。 JSFiddleでは、コードを少し簡略化しましたが、$parent.selectedItemを直接使用するのではなく、別の選択関数を持つ方がよいでしょう。他のものもやっているのであれば、var self = this;変数を関数で使用して、thisが正しいオブジェクトにバインドされていない可能性があります。

<table border="3" cellpadding="2"> 
    <tr> 
     <th>Item list</th> 
     <th>Details</th> 
    </tr> 
    <tr> 
     <td class="list"> 
      <ul data-bind="foreach: items"> 
       <li data-bind="text: label, click: $parent.select"></li> 
      </ul> 
     </td> 
     <td class="detail" data-bind="with: selectedItem"> 
      <div>Item: <span data-bind="text: label"></span></div> 
      <div>Price: <span data-bind="text: price"></span></div> 
     </td> 
    </tr> 
</table> 

とJavaScript：

function Item(title, amnt) { 
    var self = this; 

    this.label = ko.observable(title); 
    this.price = ko.observable(amnt); 
} 

var items = [ new Item('foo', 27.30), new Item('fruity foo', 30.12), new Item('foo bar', 12.34)]; 

function viewModel(list) { 
    var self = this; 

    this.items = ko.observableArray(list); 

    this.selectedItem = ko.observable(); 

    // You could call $parent.selectedItem from the binding directly, but it's a bit of a hack 
    this.select = function(item) { 
     self.selectedItem(item); 
    } 
} 

ko.applyBindings(new viewModel(items));