knockout.js - 我可以注入一个带有 knockout.js 绑定 foreach 的包装器 div

Question

<div id="metro-scrollbar" data-bind="foreach: data.sections , visible: data.sections.length > 0">
    <section data-bind="foreach: $data.tiles, visible: $data.tiles.length > 0, css: { 'last' : $parent.isLastSection($index)}">
        <div data-bind="attr : {'class' : $root.getClass($data,$parentContext.$index,$index)} ">

            <div data-bind="attr : {'class' : $root.getAspectClass($data,$index)} "></div>
            <div class="live-tile">
                <span class="tile-title" data-bind="text: title, css:{'big' : bigtitle}"></span>
                <div>
                    <p>a</p>
                </div>
            </div>
        </div>
    </section>
</div>

我有上面的绑定。在某些情况下，我需要在内部 div 周围注入一个包装器。

<div>
    <section>
        <-- if $myFunction() inject <div> -->
        <div>
            <div></div> // THIS IN HERE SHOULD BE THERE ALWAYS:
            <div >      // THIS IN HERE SHOULD BE THERE ALWAYS:
            </div>      // THIS IN HERE SHOULD BE THERE ALWAYS:
        </div>
         <-- if $myFunction() inject </div> -->
    </section>
</div>

我希望这是有道理的。

Answer 1

s093294 有正确的想法。这是一个解决方案的示例（和一个jsFiddle）：

看法

<button data-bind="click: click">Toggle</button>

<section data-bind="template: { name: templateName }"></section>

<script type="text/html" id="outer-tmpl">
    <div data-bind="template: { name: 'inner-tmpl' }">
    </div>
</script>
<script type="text/html" id="inner-tmpl">
    <div>first inner div</div>
    <div>second inner div</div>
</script>

模型

viewModel = {
    toggle: new ko.observable(true),
    templateName: function () {
        return viewModel.toggle() ? 'outer-tmpl' : 'inner-tmpl';
    },
    click: function () {
        viewModel.toggle(!viewModel.toggle());
    }
}
ko.applyBindings(viewModel);