如何使用包含迭代的模板帮助来更新流星中的流星数据

我刚刚探索了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？对不起，我愚蠢的问题..我仍然新手编程世界 –

如何使用包含迭代的模板帮助来更新流星中的流星数据

回答

相关问题