刷新Ember数据更新视图

时间:2014-05-23 04:31:32

标签: javascript model-view-controller ember.js ember-data

我正在使用Ember和Ember Data做一个非常基本的应用程序。 出于某种原因,我总是遇到同样的问题。我的应用程序正确呈现并显示数据,但如果我删除并搜索,则不会更新视图。

我已经问过here了 - 这个链接有更多的代码示例 - 但运气不好。这里is how I’m trying to do it

App = Ember.Application.create({
    LOG_TRANSITIONS: true, LOG_VIEW_LOOKUPS: true
});

App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Sample = DS.Model.extend({ name: DS.attr('string') });


App.IndexRoute = Ember.Route.extend({
   model: function() {
      return this.store.find('sample');
   }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
    remove: function(sample) {
      sample.destroyRecord();
    }
  }
});


App.Sample.FIXTURES = [
  { id: 1, name: 'Learn Ember.js'},
  { id: 2, name: 'Record 2' },
  { id: 3, name: 'Test Delete' }
];

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    showModal: function(name, content) {
      this.controllerFor(name).set('content', content);
      this.render(name, {
        into: 'application',
        outlet: 'modal'
      });
    },
    removeModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

App.MyModalComponent = Ember.Component.extend({
  actions: {
    ok: function() {
      this.$('.modal').modal('hide');
      this.sendAction('ok');
    }
  },
  show: function() {
    this.$('.modal').modal().on('hidden.bs.modal', function() {
      this.sendAction('close');
    }.bind(this));
  }.on('didInsertElement')
});

1 个答案:

答案 0 :(得分:3)

从您的代码中我尝试为您的问题找到合理的解决方案

在我进入解决方案之前,我认为控制器应该是IndexController而不是sampleDeleteModalController,因为ember希望控制器与路由具有相同的名称。

App.SampleDeleteModalController = Ember.ObjectController.extend({
  actions: {
    remove: function() {
        // Two ways
        this.get('model').destroyRecord(); 
        this.transitionToRoute('index');
    }
  }
});

来自同一路线的transitionToRoute不会刷新视图。仅当您想要重定向到另一条路线时才会起作用。

刷新视图的解决方案

选项1:您可以在删除可以执行this.refesh()刷新模型的记录后捕获索引路径中的相同操作。

选项2:您必须显式更新控制器内的绑定模型。

actions: {
    remove: function() {
        // Two ways
        var localCopy = this.get('model');
        localCopy.destroyRecord(); 
        this.set('model',localCopy);
    }
  }

选项3:在您的模型中设置模型然后执行此操作.rerender()。这几乎相当于window.reload()