Question

我的json数据如下：

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

目标是从上面的数据生成一个表元素。标题包含info，告知该特定列中的数据是否必须呈现为静态文本，还是必须在文本框中呈现（通过editable属性）。

如何为这种情况编写knockout数据绑定？

这是我有多远：

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

参见示例here（转到最后）

<强>更新

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

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

请参阅小提琴：http://jsfiddle.net/mLLrk/1/

Answer 2

如果要确定属性是打开还是关闭，可以创建这样的绑定，

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

demo

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

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

demo

Answer 3

如果您有条件地展示的内容会导致网址提取，请注意，在淘汰赛有机会隐藏它之前，您的浏览器会抓取该网址。

你可以做这样的事情来有条件地加载模板

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

如何基于模型数据有条件地渲染标记？

3 个答案:

demo

demo