2015-07-10 14 views
8

Ho un modello:Passando params ai componenti bambini 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> 

E un paio di componenti con una certa logica:

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) 

c'è un modo per passare il punto direttamente in foreach quindi non devo farlo?

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

Ma piuttosto qualcosa di simile:

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

Sono nuovo a eliminazione diretta. Sono consapevole che potrei passare un oggetto al modello di vista e operare su quell'oggetto, quindi invece di this.title dovrei fare this.object.title o this.$data.title e dovrei comunque passare manualmente $element e $parent.

C'è qualche altro modo per automatizzare questo che mi manca?

+0

In questo semplice caso, il motivo per cui si dovrebbe separare i componenti a tutti? – connexo

+0

Sto giocando con Knockout, questo è un problema che ho riscontrato, non è necessariamente reale. – falafel99

risposta

6

è possibile passare l'$context come segue:

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

Poi nel codice del componente:

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

Ma, non sembrano essere facendo uso del contesto a tutti, si' solo estendendo this con i dati passati item. Così, il seguente farà così:

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

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

Vedi Fiddle

Problemi correlati