Data binding 在我的if绑定淘汰赛中去掉不需要的div

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

根据我想要输出的图像或文本的类型。所以我用的是。问题出在底层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，它将继续插入空的

当我试图实现我想要的时，我得到了以下错误：

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

如何使用if绑定消除输出html中不必要的div

---

如果使用If绑定无法实现这一点，是否有其他方法可以实现这一点？因为如果我不仅有type='text'或'img'，还有'video'和一打其他的东西，我会让它们都空着，就像一件艺术品一样。

你无法摆脱多余的div。我使用

if

绑定定期执行您正在执行的操作

您得到的错误只是表明您有相互竞争的绑定，这是

if

和

visible

绑定所期望的。可以说，您的

if

和

visible

绑定应该总是高出一个div

下面是我的DOM使用谷歌开发工具的截图。web应用程序实际上正在运行，我使用

if

绑定来显示用户选择的视图

额外的div只是

if

绑定的产物

仔细想想，如果

If

绑定完全消失，那么当满足条件并且应该显示视图的该部分时，DOM中还剩下什么来重建它呢

更新

---

重新考虑

模板

方法后，您可以将逻辑推送到viewmodel（vm）中，将模板的

名称

绑定到vm上的可观察对象，然后基于该逻辑动态设置模板。但是，模板本身将挂在DOM中。因此，我认为这里没有净收益。

如果您不需要额外的div，您可以使用基于注释标记的

If

绑定：

<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>

演示

生成的DOM如下所示：

没有额外的div，只有一些额外的注释

---

删除这些评论。

谢谢你的回答。你确定不可能消除这些额外的差异吗？可能是模板或其他东西，不一定是if绑定。@Salvadodali不客气。我不能笼统地谈论所有的方法，因为我实际上没有努力消除空div。但我希望逻辑是一样的：必须保留一些东西，以允许基于

if

绑定或

模板

绑定或绑定“x”（随意称为“x”）的条件进行重构。@nemesv无容器绑定的目的是在没有容器的情况下引入绑定，不是为了消除div。事实上，为什么会有人使用容器绑定进行条件绑定？你的回答开始了，“如果你不需要额外的div…”我认为我们永远不需要额外的div。酷，谢谢。这正是我想要的，因为注释不会增加DOM树的大小。您可以使用

模板

绑定（而不是

if

s:

<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>