Knockout.js 如何基于模型数据有条件地呈现标记？

我有如下json数据：

var js = {
    headers: [{
        name: 'Id',
        editable: false
    }, {
        name: 'Name',
        editable: true
    }],
    data: [
        [1, 'Ajay'],
        [2, 'Ankur']
    ]
};

目标是从上述数据生成一个表元素。标题包含的信息告诉您，该特定列中的数据是否必须呈现为静态文本，或者是否必须呈现在文本框中（通过

可编辑的

属性）

如何为此场景编写淘汰数据绑定

这就是我所取得的成绩：

<table border="1" style="border-collapse:collapse">
    <thead>
        <tr data-bind="foreach: Headers">
            <th data-bind="text: $data.name"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Rows">
        <tr data-bind="foreach: $data">
            <!-- what to do here...?!!! -->               
        </tr>
    </tbody>
</table>

---

下面是我尝试使用的一个工具：

您可以使用KO内联语句：

<tbody data-bind="foreach: Rows">
        <tr data-bind="foreach: $data">               

            <!-- ko if: someCondition -->
             <td>Some Content</td>
            <!-- /ko --> 


        </tr>
    </tbody>

---

请参阅fiddle:

如果要决定属性是打开还是关闭，可以创建如下绑定

data-bind="attr: {contenteditable: editable}"

---

如果希望根据值呈现不同的HTML，可以使用虚拟元素（在表中很有用）

---

如果您有条件地显示的内容将导致URL获取，那么请注意，在knockout有机会隐藏URL之前，浏览器将获取URL

您可以这样做来有条件地加载模板

    <figure data-bind="template: { name: supportsVideo ? 'unveil-video' : 'unveil-image-sequence' }"></figure>

    <script type="text/html" id="unveil-video">           
        <video class="benefit-video" data-crossorigin="anonymous" preload="auto">
            ...
        </video>
    </script>

    <script type="text/html" id="unveil-image-sequence">
        <div class="unveil-image-sequence"></div>
    </script>

...

它没有按您希望的方式工作……这把小提琴我试图在同一条线上实现不同的东西。。。我又做了一把小提琴。为什么双向绑定现在不起作用。。。如果在任何文本框中输入内容，则相应的数组元素不会得到更新。。。ObservalArrays的工作方式是，它们仅在从阵列中添加/删除模型时更新，而不更新实际的模型值。您需要定义可观察的内部模型。请注意，如果您在

语句中放入某些内容，将导致获取URL，则即使express的计算结果为false，浏览器仍将获取该URL。标记将被删除，但为时已晚-例如，如果使用视频，可能会导致性能问题。在本例中，您可以执行类似于模板的操作，其中模板名称是动态的

<!-- ko if: editable -->
    <input type="text" />
<!-- /ko -->
<!-- ko ifnot: editable -->
    <span></span>
<!-- /ko -->

    <figure data-bind="template: { name: supportsVideo ? 'unveil-video' : 'unveil-image-sequence' }"></figure>

    <script type="text/html" id="unveil-video">           
        <video class="benefit-video" data-crossorigin="anonymous" preload="auto">
            ...
        </video>
    </script>

    <script type="text/html" id="unveil-image-sequence">
        <div class="unveil-image-sequence"></div>
    </script>