Question

我有一个与模型关联的消息列表：

App.User = DS.Model.extend({

  displayName: DS.attr('string'),
  email: DS.attr('string'),
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  location: DS.attr('string'),
  messages: DS.hasMany('message', { async: true })

});

App.Message = DS.Model.extend({

  user: DS.belongsTo('user'),
  recipient: DS.belongsTo('user'),
  createdAt: DS.attr('isodate'),
  updatedAt: DS.attr('isodate'),
  fullText: DS.attr('string'),
  subject: DS.attr('string')

});

我像这样呈现用户的消息：

<script type="text/x-handlebars" data-template-name="profile">
    <form class="new-message navbar-form" role="search" {{action "sendMessage" on="submit"}}>
         {{textarea valueBinding="newMessageText" rows="3" placeholder="Send a Message"}}
         <button type="submit" class="btn btn-default btn-lg btn-block" style="margin-top: 10px">Submit</button>
    </form>
    {{#each message in messages}}
    <div class="message text-left">
        <div class="page-header clearfix">
            <p class="created-at">{{format-date message.createdAt}}</p>
            <img class="profile-pic" src="http://lorempixel.com/24/24/people" alt="profile" class="img-rounded">
            <p class="subject">{{message.subject}}</p>
        </div>
        <p class="full-text">{{message.fullText}}</p>
    </div>
    {{/each}}
</script>

使用上面的表单提交新邮件时，会向商店添加新邮件并将其保存到服务器。问题是，在执行save时，不会重新呈现消息列表以包含新添加的消息：

App.UserController = Ember.ObjectController.extend({

  newMessageText: '',

  actions: {

    sendMessage: function() {
      var that = this;
      var message = this.get('store').createRecord('message', {
        fullText: this.newMessageText,
        recipient: this.get('model')
      });
      message.save().then(function () {
        // A new message is added to the store linked to the user, but the
        // newly-saved message is not added to the template.
        that.set('newMessageText', '');
      });
    }

  }

});

确保添加到商店的新邮件的正确方法是什么，迫使我的模板重新呈现？

Answer 1

您需要使用ArrayController作为消息列表，或Ember.Array（取决于您的需要）。您需要其中任何一个，因为您希望对象是 observable ，以便模板使用的自动更新机制可以对更改做出反应。

将模型添加到集合后重新呈现模板

1 个答案: