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

时间:2013-08-06 14:10:26

标签: knockout.js

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

3 个答案:

答案 0 :(得分:2)

您可以使用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/

答案 1 :(得分:0)

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

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

demo


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

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

demo

答案 2 :(得分:0)

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

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

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