如何根据模型数据有条件地渲染标记？答案

【问题标题】：how conditionally render markup based on model data?如何根据模型数据有条件地渲染标记？
【发布时间】：2015-07-01 05:19:41
【问题描述】：

我的json数据如下：

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

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

如何编写这个场景的淘汰赛数据绑定？

这是我已经走了多远：

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

这是我尝试使用的小提琴：http://jsfiddle.net/deostroll/mLLrk/

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以使用 KO 内联语句：

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

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


        </tr>
    </tbody>

见例子here（到最后）

更新：

好的，我明白了这个问题，因为你在 for 循环中你失去了 ViewModel 的上下文，所以为了调用一个 VM 属性你需要使用$root：

<!-- ko if: $root.renderTextBox -->

见小提琴：http://jsfiddle.net/mLLrk/1/

【讨论】：

它没有按照你想要的方式工作......这个小提琴我试图实现不同但在同一条线上的东西......jsfiddle.net/deostroll/mLLrk
我又做了一个小提琴。为什么现在双向绑定不起作用...如果您在任何文本框中输入内容，则相应的数组元素不会更新...jsfiddle.net/deostroll/CVmWY
observableArrays 的工作方式是它们仅在从数组中添加/删除模型时更新，它们不会更新实际的模型值。您需要将内部模型定义为可观察的。
请注意，如果您在 语句中放入了会导致获取 URL 的内容，那么即使 express 评估为 false，浏览器仍会获取该 URL。标记将被删除，但为时已晚 - 例如，如果您使用视频，可能会导致性能问题。在这种情况下，您可以执行模板名称是动态的模板之类的操作

【解决方案2】：

如果你想决定一个属性是打开还是关闭，你可以像这样创建一个绑定，

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

demo

如果你想根据一个值呈现不同的 HTML，你可以使用虚拟元素（在表格中很有用）。

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

demo

【讨论】：

【解决方案3】：

如果您有条件地显示的内容会导致 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>

【讨论】：