Jsview助手不再对可观察更新(Array)进行更新
Jsview助手不再对可观察更新(Array)进行更新
提问于 2014-01-21 17:06:30
在提交48 (Beta候选)之后，我不能再获得可观察的数组逻辑了。我知道一切都变了。我已经阅读了变更，玩了一段时间的新提交，但无法使它发挥作用。帮手们只是不再更新了。任何帮助都很感激。
下面是一个简单的例子。单击“添加朋友”应再次调用friends_names。但现在不是了：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>
</head>
<body>
<div id="people"></div>
<script id="peopleTemplate" type="text/x-jsrender">
<button id="add">Add person</button><br />
{^{for people}}
<div>
Name: {{>name}},
Friends: <span data-link="html{:~friends_names(#data.friends)}"></span>
<button class="friend-add">add friend</button>
</div>
{{/for}}
</script>
<script>
var data = {
people: [
{
name: "Adams",
friends: [
{name:'Petere'},
{name:'Steve'}
]
},
{
name: "Eugenia",
friends: [
{name:'Bob'}
]
}
]
};
$.templates({
peopleTmpl: "#peopleTemplate"
});
var friends_names = function(friends){
friends = friends || []
var names = []
for (var i=0, l=friends.length; i<l; i++) {
names.push(friends[i].name);
}
return '<b>' + names.join(', ') + '</b>';
};
$.views.helpers({friends_names:friends_names});
$.templates.peopleTmpl.link("#people", data);
//debug
$.observable(data).observeAll(function (ev, obj) { console.log('change', obj); });
$("#add").on("click", function() {
$.observable(data.people).insert({
name: "Amos",
friends: []
});
})
$('#people').on('click', '.friend-add', function(e){
e.preventDefault();
var name = 'Some anonymous friend' + Math.floor((Math.random()*100)+1);
var friends = $.view(this).data.friends;
$.observable(friends).insert({
name: name
});
});
</script>
</body>
</html>我知道可以使用嵌套模板(不确定它是否能解决问题)，但在实际应用程序中，helper中有更多的逻辑，因此嵌套模板不会有帮助。
回答 1
Stack Overflow用户
发布于 2014-01-22 01:32:57
是的，这是故意的:参见提交说明：
- 数据链接到数组是简化和更一致的。现在，标签不会自动绑定到数组，并在数组更新时刷新。{^{myTag路径. to.array /}现在将在to.array属性被更新时更新(属性更改)，而不是当to.array本身发生明显变化时更新。(数组更改)。标签应该选择通过从"for“标记派生(如'range‘示例：http://www.jsviews.com/#samples/tag-controls/range中的)派生，或者按照使用onAfterLink和onDispose添加/删除onArrayChange处理程序的方式进行数组绑定，如在JsViews单元测试中的{^{myWidget ./}示例中那样。这一变化与https://github.com/BorisMoore/jsviews/issues/158有关
这里有一个非常简单的解决方法。如果您将array.length作为参数(即使您的助手函数不使用它)，那么JsViews将响应数组长度的更改(这是属性更改，而不是数组更改)，并将触发助手的刷新：~friends_names(朋友，~friends_names)。
{^{for people}}
<div>
Name: {{>name}},
Friends: <span data-link="html{:~friends_names(friends, friends.length)}"></span>
<button class="friend-add">add friend</button>
</div>
{{/for}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21264603
复制相关文章
相似问题
腾讯云开发者
