Ember.js初始化行为

时间:2012-04-06 13:10:39

标签: javascript ember.js

有一个聊天,当有新消息进来时,它需要向下滚动。这很好。

但是当加载app时,通过设置ArrayController的'content'预加载了一部分消息(大约100个),因此向下滚动将被调用100次,这是不好的。对于第一个大部分数据,只运行一次滚动的正确方法是什么?

以下是一些代码http://jsfiddle.net/agentcooper/W6Bhs/

2 个答案:

答案 0 :(得分:2)

您可以创建scroll功能,当您的内容发生变化时会触发该功能,请参阅http://jsfiddle.net/pangratz666/zZ5Cc。因此,您基本上将滚动行为从包含单个消息的视图提取到包含所有消息的视图。

<强>车把

<script type="text/x-handlebars">
  {{#view App.MessagesView class="message-list" messagesBinding="App.messages" }}
  <ul class="nav nav-list">
  {{#each messages}}
    {{#view App.MessageView contentBinding="this" tagName="li"}}
      {{unbound content.from}}: {{unbound content.message}}
    {{/view}}
  {{/each}}
  </ul>
  {{/view}}
</script>

<强>的JavaScript

App.MessagesView = Ember.View.extend({
    didInsertElement: function() {
        this.scroll();
    },

    messagesChanged: function() {
        var that = this;
        // invoke this code in the next RunLoop, when changes are made to DOM
        Ember.run.next(function() {
            that.scroll();
        });
    }.observes('messages.@each'),

    scroll: function() {
        console.log('scroll');
        var el = this.$();
        el.scrollTop(el.prop('scrollHeight'));
    }
});

答案 1 :(得分:0)

您的数据来自哪里?

如果您使用的是ember-data,则可以通过ModelArray标记观察isLoaded加载完成情况......

您可以看到另一个答案:https://stackoverflow.com/a/10031377/90741