[英]Meteor two-way binding - UI update
我有基本上是div元素行的页面。 我从数组创建这些div元素。 数组中的每个对象都是具有键用户名的映射。 这是一个例子
{{#each rows}}
<div class="col-md-1 poolbox">{{this.username}}</div>
{{/each}}
页面加载后,它将成功获取this.username的值。 我在该div上有一个click事件,以便在单击它时在mongo中创建一个文档,并且还希望将map中的值更新为新值。
'click .divbox': function(e, t) {
//alert("You Clicked " + JSON.stringify(this));
Box.insert({
username: 'NEW VALUE',
createdAt: new Date()
});
将其推送到数据库后,我想将映射中的username值更新为一个新值,该值应该有效地更改UI中的值。 我尝试做this.username =“ NEW VALUE”; 在我把它推到数据库之后,那是行不通的。
最终,我想进行发布/订阅,以便它始终从数据库中提取。
您实际上可以更改值,只需在行数组中添加一个帮助器,然后检查用户名是否已更改。
例
js
Template.home.helpers({
rows : function(){
var rows = [{username :'abc'},{username :'abd'},{username :'ab'}];
_.each(rows,function(value,key) {
if(Box.find({old_username : value.username}).count() > 0){
rows[key].username = Box.find({old_username : value.username}).fetch()[0].username;
}
})
return rows;
}
})
Template.home.events({
'click .poolbox': function(e, t) {
var current_username = 'NEW VALUE';
Box.insert({
username: current_username,
old_username : $(e.currentTarget).text(),
createdAt: new Date()
});
}
})
并在您的html中
{{#each rows}}
<div class="col-md-1 poolbox">{{username}}</div>
{{/each}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.