流星雙向綁定-UI更新

Question

我有基本上是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”; 在我把它推到數據庫之后，那是行不通的。

最終，我想進行發布/訂閱，以便它始終從數據庫中提取。

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