0

私は次のコードを持っています：

function Session(name, index) {
    this.Messages = [];
    this.Name = name;
    this.Index = index;
}

var vm = {};
vm.Sessions = ko.observableArray([new Session("Foo", 0), new Session("Bar", 1)]);

ko.applyBindings();

vm.Sessions()[0].Messages.push("Hello foo");

このビューに沿って：

<div data-bind="template: {name: 'TopTemplate', foreach: Sessions}">
</div>
<script type="text/html" id="TopTemplate">
    <p>
        ${$data.Name}
    <ul data-bind="template: {name: 'NestedTemplate', foreach: Sessions[${$data.Index}]}"></ul>
    </p>
</script>
<script type="text/html" id="NestedTemplate">
    <li>
    ${$data}
    </li>
</script>

ご覧のとおり、配列を含むオブジェクトがあります。そこで、観察可能な一連のセッションを作成すると、内部プロパティを含めて観察可能になります。ここで必要なのは、ネストされた「リピーター」を表示することです。

昨日、私はどういうわけかこのスクリプトを実行することに成功しました。そして、プロパティ名を表示せずに興味深いもの、すなわちSessions[${$data.Index}].Messages。残念ながら、そのテストスクリプトを削除しました。

今、私は再作成しようとしましたが、それは機能しません。

PS。問題は、関連するプロパティを表示せずに動作させたくないということです。ネストされたテンプレートを機能させたいだけです。

4

1 に答える 1

1

これはあなたが達成したいことに近いようです：

<ul data-bind="template: {name: 'TopTemplate' , foreach: Sessions}"></ul> 
<script type="text/html" id="TopTemplate">
    <li >    
        <p>${name}</p>
        <ul data-bind=" template: {name:  'NestedTemplate' , foreach: $data} " style="list-style-type:circle;margin-left:15px">
        </ul>
    </li> 

</script>
<script type="text/html" id="NestedTemplate">         
{{each(prop, val) $data}}
    {{if $.isArray( val ) }}
        <li>
            <b>${prop}</b>
            <ul  style="list-style-type:square;margin-left:15px" >  
        {{each(index, arrayVal) val}}
            {{each(i, mVal) arrayVal }}
                <li> 
                    <b>${i}</b>  ${mVal}
                </li>
            {{/each}}
        {{/each}}
    {{else}}
    <li><b>${prop}</b> : ${val}</li>
    {{/if}}
{{/each}}     
</script>

そしてコード：

var viewModel = {
    Sessions : ko.observableArray([
        {name:"foo",index: 0, messages:[{body:"Hello foo 1"},{body:"Hello foo 2"}]},
        {name:"bar",index: 1, messages:[{body:"Hello foo 3"},{body:"Hello foo 4"}]}
    ])
};

// ko magic...
ko.applyBindings(viewModel);

このフィドルも参照してください

于 2011-08-29T09:51:58.570 に答える