Passer des params aux composants enfants dans Knockout

J'ai un modèle:

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

Et quelques composants avec une certaine logique:

 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) 

Existe-t-il un moyen de passer l'objet directement dans la foreach donc je n'ai pas à faire cela?

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

Mais plutôt quelque chose comme:

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

Je suis nouveau sur Knockout. Je suis conscient que je pourrais passer un objet au modèle de vision et opérer sur cet objet, donc, au lieu de this.title Je devrais faire this.object.title ou this.$data.title et je devrais encore passer $element et $parent manuellement.

Existe-t-il une autre façon d'automatiser cela?

Vous pouvez passer le $context comme suit:

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

Ensuite, dans le code de composant:

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

Mais, vous ne semblez pas utiliser le contexte, vous ne l'étendez qu'avec les données passées. Donc, ce qui suit va aussi bien:

 <item params="{ item: $data }"></item> viewModel: function(params) { $.extend(this, params.item) }, 

Voir Fiddle