Question

我无法理解并实施以下内容。我想要一个具有固定高度的div来列出数组中的所有值。 css溢出设置为滚动。当我将一个新项目推送到数组时，我希望div滚动到底部。在这种情况下，它是一个固定的字符串＆＃34;你好＆＃34;。

$('#click').scrollTop($('#click')[0].scrollHeight)

它在某些条件下工作（如果我使用jQuery附加到div），但是当我更新数据库时它不起作用。它似乎滚动到底部，然后将新值添加到数组中。这导致它将新项目隐藏在底部，我需要手动滚动到底部才能看到新项目。

我尝试将jQuery滚动作为回调。我是初学者，在理解异步时，如果我不得不猜测，滚动jQuery正在收集更新之前完成。

List = new Meteor.Collection('list');

if (Meteor.isClient) {
    Template.div1.helpers({
        list:function() {
            return List.find({_id: '001'}).fetch()[0].names
        }
    }),
    Template.div1.events({
        'click #click':function() {
            List.update({_id: '001'}, {$push: {names: 'Hello'}});
            $('.div1').scrollTop($('.div1')[0].scrollHeight)
        }  
    })
}

HTML：

<head>
  <title>updateTest</title>
</head>    

<body>
    {{> div1}}
</body>  

<Template name='div1'>
    <div class='div1'>
        {{#each list}}
            {{this}} <br />
        {{/each}}
    </div>
    <input type='button' id='click' value='click'/>
</Template>

编辑：修复定位错误的jQuery对象

Answer 1

尝试使用.update方法的回调，这就是您所要求的（异步更新）

List.update({_id: '001'}, {$push: {names: 'Hello'}}, function(err) {
    $('#click').scrollTop($('#click')[0].scrollHeight)
});

或使用Tracker.afterFlush

List.update({_id: '001'}, {$push: {names: 'Hello'}});

Tracker.afterFlush(function() {   

    $('#click').scrollTop($('#click')[0].scrollHeight)

});

我建议使用Tracker.afterFlush的原因是这可以确保在任何被动更改影响DOM之后触发滚动，这更多是为了您想要做的事情，而不是使用来自更新。

除了回调 - 异步方式等待服务器的响应和/这可能需要更多的时间，如果它当时很远或离线 - 那么DOM最有可能被抽出。

Answer 2

看起来你只是针对错误的元素。事实上，这本身应该有效：

  Template.div1.events({
    'click #click':function() {
      List.update({_id: '001'}, {$push: {names: 'Hello'}});
      $('#div1').scrollTop($('#div1')[0].scrollHeight)
    }  
  })

顺便说一下，list帮助器上的查询可以简化为findOne，因为_id字段是唯一索引的。

Meteor Collection更新异步？

2 个答案: