knockout.js - 如何根据模型数据有条件地渲染标记？

Question

我的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/

Answer 1

您可以使用 KO 内联语句：

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

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


        </tr>
    </tbody>

请参见此处的示例（到最后）

更新：

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

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

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

Answer 2

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

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

演示

---

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

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

演示

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