[英]jsViews - re-evaluate 'if' tag on root property change
I have created a table/grid using jsViews. 我已经使用jsViews创建了一个表/网格。 Each row has an edit button which when clicked selects the row and shows input controls instead of text values. 每行都有一个编辑按钮,单击该按钮可以选择该行并显示输入控件,而不是文本值。
If I show/hide the inputs using data-link="visible{:#parent.parent.data.selectedIndex!==#index}"
then it works fine. 如果我使用data-link="visible{:#parent.parent.data.selectedIndex!==#index}"
显示/隐藏输入,那么它可以正常工作。
However, I was trying a different approach using {^{if #parent.parent.data.selectedIndex===#index}}...{{else}}...{{/if}}
to show/hide the inputs and this doesn't work when selectedIndex changes on my data object. 但是,我正在尝试使用{^{if #parent.parent.data.selectedIndex===#index}}...{{else}}...{{/if}}
来显示/隐藏输入,并且当我的数据对象上的selectedIndex更改时,这不起作用。
I also tried with {^{if ~root.selectedIndex===#index}}
but that didn't work either. 我也尝试了{^{if ~root.selectedIndex===#index}}
但是那也不起作用。 Is it possible to do this with {{if}}
? 是否可以使用{{if}}
做到这一点? The reason I am trying this over the first method that worked was to avoid rendering lots of select boxes which will just be hidden anyway. 我在第一种有效的方法上尝试此操作的原因是避免呈现很多选择框,这些选择框无论如何都将被隐藏。
My data object looks like this: 我的数据对象如下所示:
app = {
data: [...],
selectedIndex: null,
select: function select(index) {
if (this.selectedIndex !== index) {
$.observable(this).setProperty("selectedIndex", index);
}
}
};
I link the template like this: 我这样链接模板:
$.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);
});
My template is like this: 我的模板是这样的:
<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>
When you add an {{if}} block, it is a nested view, so the button click is not getting you the item view with the index. 添加{{if}}块时,它是一个嵌套视图,因此单击按钮不会使您获得带有索引的项目视图。 You need to use $.view(this).parent.index
- or, simpler, $.view(this).getIndex()
- which automatically steps up through nested views (if any) to the item view and gets its index. 您需要使用$.view(this).parent.index
或更简单的$.view(this).getIndex()
-它将自动逐步通过嵌套视图(如果有)到达项目视图并获取其索引。
app.select($.view(this).getIndex());
(See discussion here: https://github.com/BorisMoore/jsrender/issues/173#issuecomment-11058106 ) (请参阅此处的讨论: https : //github.com/BorisMoore/jsrender/issues/173#issuecomment-11058106 )
BTW here is a modified form of your sample, just to give you some ideas. 顺便说一句,这里是示例的修改形式,只是为了给您一些想法。 It uses <button data-link="{on ~root.select #getIndex()}">Edit</button>
to hook up the click handler on the button and call the select method directly, passing it the index: 它使用<button data-link="{on ~root.select #getIndex()}">Edit</button>
连接<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.