将新的集合项添加到Meteor视图后，如何运行客户端代码？

Question

在我的模板中，我调用服务器端方法将项添加到集合中。 此集合显示在页面上。 渲染新项目后，我想将其重点放在用户身上。

这是触发服务器方法的助手。

'click .add-post-button': function(e) {
  var userId = Template.parentData(0)._id;
  Meteor.call('addPost', userId, function(error, result) {
    Session.set('newPostId', result);
  });
}

完成后，将显示新项目。 我想专注于用户。 以前，我尝试使用jQuery在上面的回调中执行此操作，但这不起作用，因为它在回调运行时尚未添加到DOM。 现在，我正在尝试使用渲染的回调：

Template.postsAdmin.rendered = function() {
  var newPostId = Session.get('newPostId');
  if (newPostId) {
    var $newPostCell = $('#' + newPostId);
    $newPostCell.find('.post').focus();
  }
};

不幸的是，这似乎也没有用。 将新项目添加到视图时，此代码不会运行。

在将新项目添加到视图中以便聚焦新项目后，如何运行代码？

Answer 1

您的原始代码非常接近 - 您只需将焦点逻辑放入反应式上下文中，以便在会话变量更改时再次运行。 成功的最短途径是使用模板自动运行 ：

Template.postsAdmin.onRendered(function() {
  this.autorun(function() {
    var newPostId = Session.get('newPostId');
    if (newPostId) {
      var $newPostCell = $('#' + newPostId);
      return $newPostCell.find('.post').focus();
    }
  });
});

---

但是，您可能遇到的一个问题是，您将遇到一个竞争条件，即在自动运行之后添加新帖子。 一个hacky解决方案是在上面添加一个超时。 一个改进的解决方案是将类似原始代码的内容添加到新添加的post子模板的onRendered回调中：

Template.post.onRendered(function() {
  var newPostId = Session.get('newPostId');
  if (newPostId === this.data._id) {
    // add code here to focus this template instance
  }
});

Answer 2

一种选择可能是observeChanges ？ 你能试试吗？

在渲染函数中执行以下操作

Template.postsAdmin.rendered = function(){

   var query = Posts.find({}); //your query
   var handle = query.observeChanges({
       added: function (id, user) {
          //code to set focus???
       }
   });
}

只要有一个新项目添加到与您的查询匹配的minimongo，就会运行此代码。

加载数据后，请务必显示模板。

docs链接http://docs.meteor.com/#/full/observe_changes