Question

我正在尝试使用EmberJS和HighchartJS开发一个小应用程序，在Model属性发生变化后重新渲染HighChartJS时遇到了一些问题。这是http://www.loancomparison.com.s3-website-us-east-1.amazonaws.com/

App.Loan = DS.Model.extend({
    name : DS.attr('string'),
    principal : DS.attr('number'),
    interest_rate : DS.attr('number'),
    months_to_pay : DS.attr('number')
});

App.LoansView = Ember.View.extend({
    templateName: "loans",

    loansChanged: function() {
        //this.rerender();
        Ember.run.scheduleOnce('afterRender', this, 'propertyChanged');
    }.observes('controller.@each.principal', 'controller.@each.name', 'controller.@each.interest_rate', 'controller.@each.months_to_pay'),

    propertyChanged : function() {
       console.log("property changed");
       this.loadHighChart(); // This will load the highchart function.
    },
});

我想要的是在模型属性完成更改时通知视图。但是，在使用观察时，它会在模型开始更改时通知视图。这会导致scheduleOnce仅在模型属性更改的初始状态下运行。

编辑：已解决 对此的解决方案变得非常简单，我只需要在模型贷款下创建“修改”属性。然后，无论何时进行编辑，我都会更新此模型。现在视图只需要观察这个“修改”属性的变化。

Answer 1

您要加入action LoanController中的保存Ember.Evented：https://github.com/pmkhoa/loan-comparison/blob/master/source/assets/js/app/controllers/loanController.js#L7

使用App.LoanController = Ember.ObjectController.extend(Ember.Evented, { <--PASS IN EMBER.EVENTED //... save: function () { this.set('isEditing', false); this.get('model').save().then(function () { this.trigger('highChartReload'); }.bind(this)); }, //... });：

，您可以在视图和控制器之间轻松进行通信

Ember.Evented

请注意，我已将trigger传递给控制器（就像使用任何mixin一样......）并且我已向保存action添加了App.LoansView = Ember.View.extend({ //... didInsertElement: function () { this.get('controller.controllers.loan').on('highChartReload', $.proxy(this.loadHighChart, this)); }, //... });。< / p>

现在，我们要在视图中监听该事件：https://github.com/pmkhoa/loan-comparison/blob/master/source/assets/js/app/views/loansView.js#L3

LoanController

现在，视图会听取loadHighChart要触发的事件，然后触发LoansController方法。

最后要做的就是告诉need App.LoansController = Ember.ArrayController.extend({ needs: ['loan'], //... });'贷款'：

{{1}}

应该这样做。希望有所帮助！

在EmberJS中模型属性更改时重新呈现视图

1 个答案: