gpt4 book ai didi

ember.js - 当 EmberJS 中的模型属性更改时重新渲染 View

转载 作者:行者123 更新时间:2023-12-02 04:56:06 27 4
gpt4 key购买 nike

我正在尝试使用 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.
},
});

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

编辑:已解决结果证明这个解决方案非常简单,我只需要在模型贷款下创建一个“修改过的”属性。然后每当进行编辑时,我都会更新此模型。现在 View 只需要观察这个“修改”属性的变化。

最佳答案

您需要在 LoanController 中 Hook 保存 操作:https://github.com/pmkhoa/loan-comparison/blob/master/source/assets/js/app/controllers/loanController.js#L7

通过使用 Ember.Evented,您可以非常轻松地在 View 和 Controller 之间进行通信:

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 传递给 Controller ​​(就像您使用任何 mixin 一样......)并且我已将 trigger 添加到保存 Action

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

App.LoansView = Ember.View.extend({
//...
didInsertElement: function () {
this.get('controller.controllers.loan').on('highChartReload', $.proxy(this.loadHighChart, this));
},
//...
});

现在 View 将监听 LoanController 以触发事件,然后触发 loadHighChart 方法。

最后要做的是告诉 LoansController 需要“贷款”:

App.LoansController = Ember.ArrayController.extend({ 
needs: ['loan'],
//...
});

应该可以了。希望对您有所帮助!

关于ember.js - 当 EmberJS 中的模型属性更改时重新渲染 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22183609/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com