使用js对流星模板的DOM访问

Question

这是我的 meteor 模板：

{{#each p}}
<div class="cpl">
<div class="chat-post">
    <li class="post">
        <div class="nm" id={{_id}}>
            <a>{{username}}</a>
        </div>
        <div class="con">{{content}}</div>
        <div class="cnm">
            <div class="t">{{time}}</div>
            <div class="m" id="cm">
                <a>message </a>
            </div>
        </div>
    </li>
 </div></div>
 {{/each}}

//PF 模板

    <template name="pf">
  <form id="post-box">
  <textarea id="new" required></textarea>
  <button type="submit">Post</button>
  </form>
  </template>

//这是我的 PF 和 PC 的助手和事件处理程序，集合名称 ROST

   Template.pc.helpers({
  p: function(){
    return Rost.find({}, {sort:{created:-1}});
  }
});



Template.pf.events({
  'submit form': function(event){
    event.preventDefault();
    var content= document.getElementById('new').value;


 var date= new Date(),
 h=(date.getHours()<10?'0':'') +date.getHours(),
 m=(date.getMinutes()<10?'0':'')+date.getMinutes();
var time=h+':'+m;
 var username= Meteor.user().username;
    Rost.insert({
      content: content,
      created:date,
      time:time,
      username: username
    });
    event.target.reset();
  }
});

我使用meteor 和mongo 作为DB，其中{{username}}、{{content}} 和{{time}} 是对象的变量。 如何使用 JavaScript 访问{{username}}？

Answer 1

在您的辅助函数中，您应该已经可以通过 this 上下文变量或 Template.instance().data 访问此数据。您的事件处理程序应如下所示：

'click cssSelector'(event,instance) {
    event.preventDefault();
}

如您所见，第二个参数是模板实例，因此您可以使用 instance.data 访问数据，或者使用 event.currentTarget 来确定被点击的元素并从那里开始。请发布您的助手或事件处理代码，以便我们可以看到您正在尝试做什么以及遇到问题。