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

Question

In my template, I call a server-side method to add an item to a collection. This collection is displayed on the page. Once the new item is rendered, I want to focus it for the user.

Here's the helper that fires the server method.

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

Once this is finished, the new item appears. I want to focus it for the user. Previously, I tried to do it in the callback above with jQuery, but that didn't work because it had not been added to the DOM by the time the callback ran. Now, I'm trying to use the rendered callback:

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

Unfortunately, this doesn't seem to be working either. This code does not run when the new item is added to the view.

How can I run code after the new item has been added to the view in order to focus the new item?

Answer 1

Your original code is really close - you just need to put the focus logic into a reactive context so it will run again with the session variable changes. The shortest path to success is to use a template autorun :

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

---

However, one problem you may run into is that you'll have a race condition where the new post is added after the autorun fires. A hacky solution is to add a timeout to the above. An improved solution is to add something like your original code to the onRendered callback of the newly added post sub-template:

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

Answer 2

One option may be observeChanges ? Can you try this?

in the rendered function do following

Template.postsAdmin.rendered = function(){

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

This code runs whenever there is a new item addeded to minimongo which matches your query.

Make sure to show the template after you load the data.

docs link http://docs.meteor.com/#/full/observe_changes