Meteor 双向绑定 - UI 更新

Question

我的页面基本上是 div 行元素。我从一个数组中创建了那些 div 元素。数组中的每个对象都是一个具有键用户名的映射。这是

的示例

{{#each rows}}
      <div class="col-md-1 poolbox">{{this.username}}</div>
{{/each}}

当页面加载时，它成功地抓取 this.username 的任何值。我在 div 上有一个点击事件，所以当它被点击时，我在 mongo 中创建了一个文档，并且还想将地图中的值更新为新值。

'click .divbox': function(e, t) {
    //alert("You Clicked " + JSON.stringify(this));
  Box.insert({
    username: 'NEW VALUE',        
    createdAt: new Date()
  });

将其推送到数据库后，我想将映射中用户名的值更新为一个新值，该值应该有效地更改 UI 中的值。我试着做 this.username = "NEW VALUE";在我将它推送到数据库之后，但那没有用。

最终我想做 pub/sub 以便它一直从数据库中提取。

Answer 1

您实际上可以更改该值，只需在您的行数组中添加一个助手并检查用户名是否已更改。

例子

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

Meteor 双向绑定 - UI 更新

Meteor two-way binding - UI update

javascript

jquery

node.js

2-way-object-databinding

meteor