在我的if绑定淘汰赛中摆脱不需要的DIV

Question

我有一个具有以下结构的可观察数组（其中type只能是text或img）：

ko.observableArray([{
    type: 'text',
    info: 'Hello'
},{
    type: 'img',
    info: 'http://cdn.zendesk.com/images/documentation/apps/logo-small.png'
}]);

根据我想要输出图像或一堆文本的类型。所以我使用的是if binding。 result looks the way I expected，但问题出在底层的html：

<div data-bind="foreach: elements">
    <div data-bind="if: type == 'text'"><div data-bind="text: info">Hello</div>        </div>
    <div data-bind="if: type == 'img'"></div>  // Do not want it to be here

    <div data-bind="if: type == 'text'"></div> // Do not want it to be here
    <div data-bind="if: type == 'img'"><img data-bind="attr: { 'src': info}" src="http://cdn.zendesk.com/images/documentation/apps/logo-small.png">
    </div>
</div>

如果if语句返回false，它会一直插入空<divs>。

当我尝试使用putting if and text binding in the same element达到我想要的效果时，我收到以下错误：

  

多个绑定（if和text）正在尝试控制后代   绑定相同的

如何使用if绑定删除输出html中不需要的DIV？

如果使用if-binding无法实现这一点，有没有其他方法可以做到这一点？因为如果我不仅会输入='text'或'img'而且还有'video'和其他十几种东西，我将把它们全部空置在那里作为一件神器。

Answer 1

你无法摆脱额外的div。我使用if绑定做你经常做的事情。

您获得的错误只表示您有竞争绑定，这与if和visible绑定有关。 <{1}}和if绑定应该总是高出一个div，可以这么说。

下面是使用Google开发工具的DOM的屏幕截图。 Web应用程序实际上正在运行，我使用visible绑定来显示用户选择的视图。

额外的div只是if绑定的工件。

如果您考虑一下，如果if绑定完全消失，那么当条件满足并且应该显示该部分视图时，DOM中还会留下什么来重构它？

<强>更新

重新考虑if方法后，您可以将逻辑推入视图模型（vm），将模板的template绑定到vm上的observable，然后基于此动态设置模板那个逻辑。但是，模板本身将在DOM中流行。所以我不认为这里有净收益。

Answer 2

如果您不需要额外的div，则可以使用基于注释标记的if绑定的containerless control flow syntax：

<div data-bind="foreach: elements">
    <!-- ko if: type == 'text' -->
        <div data-bind="text: info"></div>
    <!-- /ko -->
    <!-- ko if: type == 'img' -->
        <img data-bind="attr: { 'src': info}" />
    <!-- /ko -->
</div>

演示JSFiddle。

生成的DOM将如下所示：

没有额外的div只有一些额外的评论。

要删除这些评论you can use templates。