如何在EmberJS 1.13.8中呈现视图而不刷新页面？

Question

抱歉，这个问题太幼稚了，但是我对在Ember中渲染视图感到困惑。

我有一条“人”路线。 我可以对它进行CRUD操作。

router.js

  this.route('person', function() {
    this.route('index', { path: '' });
 });

控制器/人/ index.js

actions: {    
  createPerson: function() {
  var person = this.get('store').createRecord('person');
  this.set('person', person);
  this.set('editPersonPane', true);
},

editPerson: function(person) {
  this.set('person', person);
  this.set('editPersonPane', true);
},

closeEditPerson: function() {
 this.get('person').rollback();
 this.set('editPersonPane', false);
},

savePerson: function(person) {
  var _this = this;
  person.save().then(function() {
    _this.set('editPersonPane', false);
    Ember.get(_this, 'flashMessages').success('person.flash.personUpdateSuccessful');
  }, function() {
    Ember.get(_this, 'flashMessages').danger('apiFailure');
  });
},

deletePerson: function(person) {
  var _this = this;
  person.destroyRecord().then(function() {
    _this.set('editPersonPane', false);
    Ember.get(_this, 'flashMessages').success('person.flash.personDeleteSuccessful');
  }, function() {
    Ember.get(_this, 'flashMessages').danger('apiFailure');
  });
}
}

我现在想做的是，当我想创建一个新的人时，会插入一个表单来创建它。 填写表格后，我希望人员列表视图能够立即更新，而无需刷新页面。 现在，我已经能够添加表单，并且当我添加新人员时，我会收到一条成功的Flash消息，但是该消息不会立即在视图中更新。 我必须刷新页面。

它可能必须与观察者做些事情，但是我仍然不确定如何做。

Answer 1

重新加载保存的对象将使您避免刷新页面：

savePerson: function(person) {
  var _this = this;
  person.save().then(function(saved) {
     saved.reload();
    _this.set('editPersonPane', false);
    Ember.get(_this, 'flashMessages').success('person.flash.personUpdateSuccessful');
  }, function() {
    Ember.get(_this, 'flashMessages').danger('apiFailure');
  });
}

另外，值得注意的是，如果您分解并使用ES6语法，则可以按如下所示清理代码：

//controllers/person/index.js
//at the top of the file
import Ember from 'ember';

const { get, set } = Ember;

//other code

  actions: {    

  //other actions

    savePerson(person): {
      person.save().then((saved) => {
        saved.reload();
        set(this, 'editPersonPane', false);
        get(this, 'flashMessages').success('person.flash.personUpdateSuccessful');
      }, () {
        get(this, 'flashMessages').danger('apiFailure');
      });
    }
  }

Answer 2

哪条路线显示您的人员清单？

这样做会更好，因此您可以显示列表，然后在person.hbs出口中编辑人员？

this.route('persons', function() {
    this.route('person', { path: 'id' });
});