Knockout.js 绑定可以同时应用于容器标签和后代吗? [英] Can Knockout.js bindings apply to container tags AND descendants both?

问题描述

让我用一个简单的案例来设置问题.

Let me setup the question with a simple case.

我有一个 HTML 表格，其中的行由一个 observableArray 控制.效果很好.

I have an HTML table, the rows of which are controlled by an observableArray. It works great.

但是，如果 observableArray 中的元素为零，我想要单行这样说.我试过这个标记，它有点"有效:

If the observableArray has zero elements in it however, I want a single row to say so. I tried this markup, which "kind of" works:

<tbody data-bind="if: $root.data.contacts().length == 0">
    <tr>
        <td>There are no contacts specified yet.</td>
    </tr>
</tbody>

<tbody data-bind="foreach: $root.data.contacts">
        SNIP - a tbody with the rows is here when elements > zero
</tbody>

当我说有点"时，我的意思是可见.它确实出现在零元素处，并且确实像您期望的那样在 > 零元素处消失.但是，当您打开 DOM 检查器(开发工具)并查看内存中的 DOM 时，您会发现有两个 tbody 部分，而不是一个.现在一个 tbody 当然总是空的，但是 两个 tbody 标签不是 HTML5 正确的，所以这必须修复 这不是想要的标记.

When I say "kind of", I mean VISIBLY. It really does show up at zero elements and really does go away at > zero elements like what you would expect. However when you open the DOM inspector (dev tools) and look at the DOM in memory, you find that there are TWO tbody sections, not one. Now one tbody is always empty of course, but two tbody tags is not HTML5 correct, so this must be fixed this is not the desired markup.

作为一个 Knockout 新手，我尝试用一​​个虚拟元素来解决这个问题:

Being a Knockout newbie, I tried to fix this problem with a virtual element:

<!-- ko if: $root.data.contacts().length == 0 -->
<tbody>
    <tr>
        <td>There are no contacts specified yet.</td>
    </tr>
</tbody>
<!-- /ko -->

不幸的是，这对我们的构建过程不起作用:我们在压缩之前缩小了 HTML，并消除了注释.

Unfortunately this doesn't work for our build process: we minify HTML prior to compression and comments get eliminated.

我的印象是 KO 绑定适用于容器元素本身及其后代，但似乎并非如此.有没有办法告诉 KO 应用于容器元素以及子元素，或者我是否需要以某种方式更改标记而不是虚拟容器?

I was under the impression that KO bindings applied to the CONTAINER ELEMENT ITSELF as well as descendants, but this seems to not be so. Is there a way to tell KO to apply to container elements as well as children, or do I need to change the markup in some way OTHER THAN a virtual container?

推荐答案

和您一样，我的第一个选择是用于 if 绑定的虚拟标签.但既然这不是一个选项，那么可交换模板怎么样?

Like you, my first choice would be virtual tags for an if binding. But since that's not an option, how about swappable templates?

var vm = {
  contacts: ko.observableArray()
};

ko.applyBindings(vm);

setTimeout(function() {
  vm.contacts(['One', 'Two', 'Three']);
}, 2500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id="empty-body">
  <tbody>
    <tr>
      <td>There are no contacts specified yet.</td>
    </tr>
  </tbody>
</template>
<template id="normal-body">
  <tbody data-bind="foreach: contacts">
    <tr>
      <td data-bind="text:$data"></td>
    </tr>
  </tbody>
</template>
<table data-bind="template: contacts().length === 0 ? 'empty-body' : 'normal-body'"></table>

这篇关于Knockout.js 绑定可以同时应用于容器标签和后代吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！