小编fal*_*l99的帖子

我有一个模板:

<template id="item-list">
  <form action="" data-bind="submit: addItem">
    <input type="text" name="addItem" data-bind="value: newItem">
    <button type="submit">Add Item</button>
  </form>
  <ul class="item-list" data-bind="foreach: items">
    <item params="title: title,
                  $element: $element,
                  $data: $data,
                  $parent: $parent"></item>
  </ul>
</template>
<template id="item">
  <li class="item" data-bind="text: title, click: $parent.removeItem"></li>
</template>
<item-list params="items: items"></item-list>

还有一些具有一些逻辑的组件:

function Item(title) {
  this.title = title
}

ko.components.register('item-list', {
  viewModel: function(params) {
    this.items = ko.observableArray(params.items)
    this.newItem = ko.observable('')
    this.addItem = function() {
      this.items.push(new Item(this.newItem()))
    }
    this.removeItem = function(a) {
      this.items.remove(a.$data)
    }.bind(this)
  },
  template: {element: 'item-list'}
}) …