将params传递给Knockout中的子组件 [英] Passing params to children components in Knockout

问题描述

我有一个模板：

<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>

以及一些具有一些逻辑的组件：

And a couple of components with some logic:

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'}
})

ko.components.register('item', {
  viewModel: function(params) {
    $.extend(this, params)
  },
  template: {element: 'item'}
})

function ViewModel() {
  this.items = [
    new Item('One'),
    new Item('Two'),
    new Item('Three')
  ]
}

var vm = new ViewModel()

ko.applyBindings(vm, document.body)

有没有办法直接在项目中传递项目 foreach 所以我不必这样做？

Is there a way to pass the item directly in the foreach so I don't have to do this?

<ul class="item-list" data-bind="foreach: items">
  <item params="title: title,
                $element: $element,
                $data: $data,
                $parent: $parent"></item>
</ul>

但更像是：

<item params="$context"></item>

我是Knockout的新手。我知道我可以将一个对象传递给视图模型并对该对象进行操作，所以代替 this.title 我将不得不做这个.object.title 或这个。$ data.title 我还是要传递 $ element 和 $ parent 手动。

I am new to Knockout. I am aware that I could pass an object to the view model and operate on that object, so instead of this.title I would have to do this.object.title or this.$data.title and I would still have to pass $element and $parent manually.

有没有其他方法可以自动化我缺少这个？

Is there any other way to automate this that I am missing?

推荐答案

您可以按如下方式传递 $ context ：

You can pass the $context as follows:

<item params="{ context: $context }"></item>

然后在组件代码中：

viewModel: function(params) {
    var ctx = params.context;
    var itemData = ctx.$data;
    $.extend(this, itemData)
},

但是，你似乎根本没有使用上下文，你只是使用传递的项扩展这个数据。因此，以下内容也是如此：

But, you don't seem to be making use of the context at all, you're only extending this with the passed item data. So, the following will do as well:

<item params="{ item: $data }"></item>

viewModel: function(params) {
    $.extend(this, params.item)
},

请参阅小提琴

这篇关于将params传递给Knockout中的子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！