傳遞PARAMS兒童組件在淘汰賽

我有一個模板：傳遞PARAMS兒童組件在淘汰賽

<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.$data.title而不是this.title，而我仍然必須手動通過$element和。

是否有任何其他方式來自動化我失蹤？

來源

2015-07-10 falafel99

在這個簡單的例子，你爲什麼會在所有分離的組件？ – connexo

我只是玩Knockout，這是我遇到的一個問題，它不一定是現實世界。 – falafel99

您可以通過$context如下：

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

然後在組件代碼：

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

但是，你似乎沒有被利用上下文的所有，你」重新只擴展this與通過item數據。所以，下面將做的一樣好：

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

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

見Fiddle

來源

2015-07-13 08:06:13 haim770

傳遞PARAMS兒童組件在淘汰賽

回答

相關問題