jsViews

Question

我使用 jsViews 创建了一个 table/grid。每行都有一个编辑按钮，当单击该按钮时 select 显示该行并显示输入控件而不是文本值。

如果我 show/hide 使用 data-link="visible{:#parent.parent.data.selectedIndex!==#index}" 输入，那么它工作正常。

但是，我正在尝试使用 {^{if #parent.parent.data.selectedIndex===#index}}...{{else}}...{{/if}} 到 show/hide 输入的不同方法，当 selectedIndex 更改我的数据对象时，这不起作用。

我也用 {^{if ~root.selectedIndex===#index}} 试过，但也没用。 {{if}} 可以做到这一点吗？我在第一种可行的方法上尝试这个的原因是为了避免渲染大量 select 无论如何都会被隐藏的框。

我的数据对象如下所示：

app = {
    data: [...],

    selectedIndex: null,

    select: function select(index) {
        if (this.selectedIndex !== index) {
            $.observable(this).setProperty("selectedIndex", index);
        }
    }
};

我link模板是这样的：

$.templates("#myTemplate").link("#divHolder", app)
    .on("click", ".data .editButton", function() {
        app.select($.view(this).index);
    })
    .on("click", ".data .saveButton", function() {
        // save details
    })
    .on("click", ".transmittals .cancelButton", function() {
        // reset values

        app.select(null);
    });

我的模板是这样的：

<script id="myTemplate" type="text/x-jsrender">
    <table id="tblData" class="data">
        <thead>
            <tr>
                <th></th>
                <th>A</th>
                <th>B</th>
                <th>C</th>                    
            </tr>
        </thead>
        <tbody>
            {^{for data}}
            <tr class="item">
                <td>
                    {{if #parent.parent.data.selectedIndex===#index}}
            <span class="editItem">
                <button class="cancelButton">Cancel</button></span>
                    {{else}}
            <span class="viewItem">
                <button class="editButton">Edit</button></span>
                    {{/if}}                
                </td>
                <td>
                    {^{if #parent.parent.data.selectedIndex===#index}}
            <span class="editItem"><input type="text" data-link="B" /></span>
                    {{else}}
            <span class="viewItem" data-link="B"></span>
                    {{/if}}
                </td>
                <td>
                    {^{if #parent.parent.data.selectedIndex===#index}}
            <span class="editItem"><input type="text" data-link="C" /></span>
                    {{else}}
            <span class="viewItem" data-link="C"></span>
                    {{/if}}
                </td>
            </tr>
        {{/for}}
        </tbody>
    </table>
</script>

Answer 1

当您添加 {{if}} 块时，它是一个嵌套视图，因此单击按钮不会让您看到带有索引的项目视图。您需要使用 $.view(this).parent.index - 或更简单的 $.view(this).getIndex() - 它会自动通过嵌套视图（如果有）进入项目视图并获取其索引。

app.select($.view(this).getIndex());

（参见此处的讨论：https://github.com/BorisMoore/jsrender/issues/173#issuecomment-11058106）

顺便说一句，这里是您的样本的修改形式，只是为了给您一些想法。它使用 <button data-link="{on ~root.select #getIndex()}">Edit</button> 连接按钮上的点击处理程序并直接调用 select 方法，将索引传递给它：

<script id="myTemplate" type="text/x-jsrender">
<table id="tblData" class="data">
    <thead>
        ...
    </thead>
    <tbody>
    {^{for data}}
        <tr class="item">
        {^{if ~root.selectedIndex===#index}}
            <td><button class="cancelButton" data-link="{on ~root.select null}">Cancel</button></td>
            <td><input data-link="A" /></td>
            <td><input data-link="B" /></td>
        {{else}}
            <td><button class="editButton" data-link="{on ~root.select #getIndex()}">Edit</button></td>
            <td data-link="A"></td>
            <td data-link="B"></td>
        {{/if}}
        </tr>
    {{/for}}
    </tbody>
</table>
</script>

<div id="divHolder"></div>

<script>
var app = {
    data: [{A:"aa", B: "bb"},{A:"aa2", B: "bb2"}],
    selectedIndex: null,
    select: function(index) {
        if (this.selectedIndex !== index) {
            $.observable(this).setProperty("selectedIndex", index);
        }
    }
};

$.templates("#myTemplate").link("#divHolder", app);
</script>

jsViews - 重新评估根属性更改上的 'if' 标签

jsViews - re-evaluate 'if' tag on root property change

javascript

jquery

jsViews - 重新评估根 属性 更改上的 'if' 标签

jsViews - re-evaluate 'if' tag on root property change

javascript

jquery

jsviews

jsViews - 重新评估根属性更改上的 'if' 标签