2

ネストされたコンポーネントは、ネストされたビュー モデルも前提としています。

ただし、サンプル コンポーネントでは、この種の依存関係は表示されません (KO ユーザーにはあまり明確ではない BackboneJS TODO アプリを除く)。

コレクションなど、そのようなデザインを行う方法について詳しく教えてください。

  • ItemViewModelプロパティNameとIsSelected
  • CollectionViewModelwith にはItems、 のコレクションを含むプロパティがあり、ItemViewModel選択SelectedCountされたアイテムの数を数えることによって計算されます。(これは KO でもっと簡単な方法で実行できることはわかっていますが、説明のためです。
4

2 に答える 2

2

ビューモデル（VM）は単なるオブジェクトです（を使用してバインドされko.applyBindings()ます）-つまり、VMを親オブジェクトに任意にネストできます（@Hasithが言ったこと）。親オブジェクトを1 つだけBoilerplate に戻す必要があります。超コメント付きのコードで我慢してください：

// Let's assume you have your items nicely formatted in an array 
// data source (and technically the objects in this array can be 
// considered 'dumb' viewmodels)
var items = [
  {Name:'a',isSelected:false}, 
  {Name:'b',isSelected:true}
  ]

// We can apply some bindings to make 'smarter' viewmodels
// One approach is just to map using rocking KO mapping plugin
var koMapItems = ko.mapping.fromJS( items )

// You could skip the mapping plugin and go for broke
// creating your own VM mappings manually
// (you could do this using the mapping plugin with less work)
var goforbrokeVM = function( item )
{
  var _name = ko.observable( item.Name )
  var _dance = function() { return _name+' is space monkey' }

  return {
    Name: _name,
    isSelected: ko.observable( item.isSelected ),
    spaceMonkey: _dance
  }
}
// Don't forget to assign and create your goforbrokeVMs
var epicItemVMs = []
for (var i=0;i<items.length;i++) 
  epicItemVMs.push( new goforbrokeVM( items[i]) )


// Now the interesting part, lets create a 'child' VM that
// we can embed in another VM. Notice this VM has as a
// property an array of VMs itself.
var childVM = {
  elements: epicItemVMs,
  // A sub method, because we can
  otherMethod: function() { return 'wat' }
}

// And ultimately our 'master' VM with its own properties
// including the nested child VM we setup above (which you'll
// remember contains its own sub VMs)
var ParentVM = {
  // And its own property
  parentPropA: ko.observable('whatever'),

  // Oooow look, a list of alternative ko.mapping VMs
  simpleMappedItems: koMapItems,

  // And a nested VM with its own nested goforbrokeVMs
  nested: childVM
}

// Apply your master viewmodel to the appropriate DOM el.
ko.applyBindings( ParentVM, document.getElementById('items'))

そしてあなたのHTML：

<div id="items">
  <span data-bind="text: parentPropA"></span>

  <!-- Step through one set of items in ParentVM -->
  <div data-bind="foreach: simpleMappedItems">
    <input type="checkbox" data-bind="checked: isSelected">
    <span data-bind="text: Name"></span>
  </div>

  <!-- Or jump into the nested models and go crazy -->
  <!-- ko with: nested -->
    <div data-bind="foreach:elements">
      <div data-bind="text: spaceMonkey"></div>
    </div>
    <div data-bind="text: otherMethod"></div>
  <!-- /ko -->
</div>

このようにして、単一のオブジェクト (この場合はParentVM) を、必要な数のネストされたビューモデルと共に Boilerplate に渡すことができます。

ノックアウト ライブのマッピング プラグインの情報: http://knockoutjs.com/documentation/plugins-mapping.html

于 2012-10-04T06:39:57.727 に答える
-1

「todo」サンプルは、Addy Osmani の実装を採用することによって行われます。ここにもノックアウトjsの実装があります。

于 2012-09-21T08:58:38.630 に答える