如何使用包含迭代的模板幫助來更新流星中的流星數據

我剛剛探索了meteor.js並進行了一些實驗..我想使用文本框更新數據..但是文本框是從模板幫助程序迭代生成的。如何使用包含迭代的模板幫助來更新流星中的流星數據

所以，場景就像我們輸入數據，然後再retrive它，我們可以修改我們的數據。所以，當我們編輯

問題是我無法從文本框中獲取值..其始終「undefined」..這裏是我的html代碼：

<body> 
    <form class="InsertTEST"> 
     <input type="text" name="att1" placeholder="fill the att1"/> 
     <input type="text" name="att2" placeholder="fill the att3"/> 
     <input type="submit" value="submit"/> 
    </form> 
    <table> 
     {{#each a}} 
      {{> test}} 
     {{/each}} 
    </table> 
</body> 

<template name="test"> 
    <tr class="testRow"> 
     <td><input type="checkbox" class="toogle-check"></td> 
     <td><input type="text" id="att4" value="{{att1}}"/></td> 
     <td><input type="text" id="att5" value="{{att2}}"/></td> 
     <td><a href="#">{{att3}}</a></td> 
     <td><button class="UpdateTEST">Update</button></td> 
     <td><button class="DeleteTEST">Remove</button></td> 
    </tr> 
</template>

這裏我的js代碼：

TEST = new Mongo.Collection('TEST'); 

if (Meteor.isClient) { 
    Template.body.helpers({ 
     a: function() { 
      return TEST.find(); 
     } 
    }); 

    Template.body.events({ 
     'submit .InsertTEST' : function(event){ 

      var _att1 = event.target.att1.value; 
      var _att3 = new Date(); 
      var _att2 = Number(event.target.att2.value) + 10; 

      Meteor.call('InsertTEST', _att1, _att2, _att3); 

      event.target.att1.value = ""; 
      event.target.att2.value = ""; 


      return false; 
     } 


    }); 

    Template.test.events({ 

     'click .UpdateTEST' : function(e,t) { 
      var _att4 = $('#att4').val(); 
      alert(_att4); 


      /* 
      var query = { 
       att1 : _att4, 
       att2 : _att5 
      }; 
      */ 
      TEST.update(this._id, {$set:query}); 
      return false; 
     } 

    }); 

} 

if (Meteor.isServer) { 
    Meteor.methods({ 
     'InsertTEST' : function(_att1, _att2, _att3) { 

      TEST.insert({ 
       att1:_att1, att2:_att2 
      }); 

     } 

    }); 
}

來源

2015-06-15 James Yap

首先，不要命名你的助手「a」，你需要得到一個合適的名字。其次，你不應該在流星中使用body標籤。它由服務器生成，並將模板加載到其中。

比方說，你父模板被稱爲MainTemplate

你的助手可能看起來像：

Template.MainTemplate.helpers({ 
    "item":function(){ 
    return TEST.find(); 
} 
});

，你只是用這個替換您的spacebars迭代：

{{#each item}} 
     {{> test}} 
    {{/each}}

好的做法當你得到未定義的東西時嘗試記錄它的父項（console.log(this);在你的Template.test.rendered函數中）。它允許您找到調用對象的正確方式（即它在您的模板中的位置）。

來源

2015-06-15 14:53:02 Billybobbonnet

嗨Billybobbonnet，感謝你的答案..我會接受你的建議對適當的名稱和標籤體：d ..關於渲染的東西，我會先嚐試它..謝謝 –

你知道爲什麼嗎？您的HTML中有重複的ID。您使用編號att4和att5多次呈現輸入。 ID在你的HTML文檔中應該是唯一的。你應該在你的測試模板forEach循環內部使用的動態ID代替靜態的ID：

<td><input type="text" id="{{_id}}4" value="{{att1}}"/></td> 
<td><input type="text" id="{{_id}}5" value="{{att2}}"/></td>

{{_id}}將插入當前文檔ID爲HTML元素的ID。

可以再用$('#' + this._id + numberOfInput).val()訪問UpdateTest事件中輸入的值：

Template.test.events({ 

    'click .UpdateTEST' : function(e,t) { 
     var _att4 = $('#' + this._id + 4).val(); 
     var _att5 = $('#' + this._id + 5).val(); 
     alert('_att4 = ' + _att4 + ', _att5 = ' + _att5); 
    } 

});

來源

2015-06-15 15:05:43

嗨Tomas Hromnik，感謝您的幫助..我已經嘗試過，但它仍然返回undefined值。 –

哦，對不起，我的代碼有一個小錯誤，現在就試試。它應該工作;-) –

嗨托馬斯，thx爲您的幫助其工作現在：D .. btw有關的語法是它叫jquery或JavaScript？對不起，我愚蠢的問題..我仍然新手編程世界 –

如何使用包含迭代的模板幫助來更新流星中的流星數據

回答

相關問題