1

私は KnockoutJs を初めて使用し、observableArray にプッシュするときに" Unable to parse bindings. Message: ReferenceError: items is not defined; Bindings value: foreach: items " というエラーを理解しようとしています。

以下は 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>​

J:

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);
4

1 に答える 1

2

問題は、テンプレートがループして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/

于 2012-10-30T22:55:08.537 に答える