Передача Params к детям компонентов в Knockout

Question

У меня есть шаблон:

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

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 так что мне не нужно это делать?

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

Но скорее что-то вроде:

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

Я новичок в нокаут. Я знаю, что могу передать объект модели представления и работать с этим объектом, поэтому вместо this.title мне нужно было бы сделать this.object.title или this.$data.title, и мне все равно пришлось бы передавать $element и $parent вручную.

Есть ли другой способ автоматизировать это, что мне не хватает?

Answer 1

Вы можете передать $context следующим образом:

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

Затем в коде компонента:

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

Но, кажется, вы не должны использования контекста на всех, вы» re только расширение this с прошедшими item данных. Таким образом, следующий будет делать, а также:

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

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

См Fiddle