Question

我是KnockoutJs的新手，我正在尝试理解错误“无法解析绑定。消息：ReferenceError：项目未定义;绑定值：foreach：items ”当推送到observableArray时。

以下是jsFiddle中的相同代码：http://jsfiddle.net/TheMetalDog/yYAFJ/

单击“添加子项”按钮时，viewModel.items()[0].childItems.push(newItem);发生错误。

HTML：

<div data-bind="template: { name: 'tmpl-item-list' }"></div>
<button type="button" class="add">Add</button>
<button type="button" class="addChild">Add Child</button>

<div class="error"></div>
<script type="text/html" id="tmpl-item-list">
    <ul data-bind="foreach: items">
        <li>
            <span data-bind="text: name"></span>
            <div data-bind="template: {foreach: childItems, name: 'tmpl-item-list'}">    </div>
        </li>
    </ul>
</script>

JS：

var viewModel = {}, i = 5;

viewModel.items = ko.observableArray([]);
viewModel.items.push({name: '1', childItems: ko.observableArray([])});
viewModel.items.push({name: '2', childItems: ko.observableArray([])});
viewModel.items.push({name: '3', childItems: ko.observableArray([])});
viewModel.items.push({name: '4', childItems: ko.observableArray([])});


$('button.add').click(function(){
    var newItem = {name: i, childItems: ko.observableArray([])};
    viewModel.items.push(newItem);
    i++;
});

$('button.addChild').click(function(){
    try{
        var newItem = {name: i, childItems: ko.observableArray([])};
        viewModel.items()[0].childItems.push(newItem); 
        i++;
    }catch(e){
        console.log('error', e);
        $('.error').append(e.message + '<br />');
    }
});

ko.applyBindings(viewModel);

Answer 1

问题是您的模板在items上循环，并且您正在通过该模板发送childItems中的每个项目。

另一种方法是在最初调用模板时使用foreach，而不是在模板中执行items循环。

因此，您的原始绑定可能如下所示：

<div>
   <ul data-bind="template: { name: 'tmpl-item-list', foreach: items }">
    </ul>
</div>

您的模板如下所示：

<script type="text/html" id="tmpl-item-list">
        <li>
            <span data-bind="text: name"></span>
            <div data-bind="template: {foreach: childItems, name: 'tmpl-item-list'}"></div>
        </li>
</script>

此处示例：http://jsfiddle.net/rniemeyer/yYAFJ/7/

KnockoutJs - 模板中的Child observableArray

1 个答案: