每当有新记录时,使用 Ember-Model 更新视图
Updating a view whenever there's new records with Ember-Model
我有一个简单的Ember.js应用程序。有一个application view
,在那个视图里面有一个results view
。
我正在使用 ember 模型以这种方式从服务器获取 JSON:
Map.Winery = Ember.Model.extend({
name: Ember.attr(),
address: Ember.attr(),
address_2: Ember.attr(),
city: Ember.attr(),
stateprovince: Ember.attr(),
country: Ember.attr(),
latitude: Ember.attr(),
longitude: Ember.attr(),
full_address: function () {
return this.get('address') + ' ' + this.get('city') + ' ' + this.get('stateprovince') + ' ' + this.get('country');
}.observes('address', 'city', 'stateprovince', 'country')
});
Map.Winery.adapter = Ember.Adapter.create({
findAll: function(klass, records) {
return Ember.$.getJSON('/api/wineries').then(function(response) {
if (response.success) {
records.load(klass, response.data);
}
});
}
});
我让它尽可能简单,以便人们可以公平地了解正在发生的事情。
所以基本上,我的应用程序视图中有一个按钮,每当我单击时,都会调用一个调用 Map.Winery.findAll() 的操作;(从服务器重新加载数据)。
我想要的是,每当记录中加载新数据时,results view
都应该使用新结果进行更新。
应用.hbs
<button class="locate" {{action "reload" on="click"}}>Reload</button>
{{view Map.ResultsView}}
application_controller.js
Map.ApplicationController = Ember.ObjectController.extend({
actions: {
reload: function() {
var results = Map.Winery.findAll();
}
}
});
结果.hbs
<div class="results">
{{#each results}}
<p>{{this}}</p>
{{/each}}
</div>
results_view.js
Map.ResultsView = Ember.View.extend({
templateName: 'results',
didInsertElement: function(e) {
}
});
现在的问题是:每当有新数据从服务器加载到记录时,我该如何使结果视图得到更新?
我尝试插入尽可能多的相关代码,请随时提出任何问题。
谢谢
只需将新对象推送到集合中(或将集合替换为 findAll 中的新集合)。
http://emberjs.jsbin.com/EFiTOtu/1/edit
App.IndexController = Em.ArrayController.extend({
actions: {
addNewColor: function(){
this.get('model').pushObject(this.get('newColor'));
}
}
});
我发现的最好的方法是将一个事件添加到我需要触发的任何内容中,并在需要时使用该触发器。
使用Ember.Evented
:
App.ApplicationController = Ember.ObjectController.extend(Ember.Evented, {
viewUpdated: function(args) {}
/* controller stuff here */
});
我现在几乎可以从任何地方添加这样的事件:
this.get('controller').on('viewUpdated', $.proxy(this.viewUpdated, this));
因此,每当我必须触发视图进行更新时,我都会这样做:
this.get('controllers.application').trigger('viewUpdated', args);
(顺便说一下,参数是可选的)
这样,只要我想触发,事件就会被触发。它不像观察者那么强大,但它仍然做得很好!
相关文章:
- 使用Ember-cli项目中的ES6库
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- 使用Ember的Web应用程序架构.动画逻辑应该放在哪里
- 如何使用Ember将动态分段的值输出到页面上
- Ember.js-如何使用Ember.Router实现所选项目
- 使用ember模式对话框的ember中的可路由模式
- vue-js-单选按钮won't默认情况下使用v-model属性进行检查
- 在高延迟网络下使用Ember数据时的奇怪行为
- 使用Ember CLI中模板内的ObjectController从模型中获取数据
- i18n转换无法使用ember-断言失败:缺少键的转换
- 使用Ember中的组件生命周期事件
- 如何使用RadioButtonList并使用Ember获取选定的值
- 使用Ember.js将新行动态插入到Table上下文中
- 我可以将其他参数传递给Ember Model belongsTo吗
- 为什么 AngularJS 在使用 ng-model 时不会在文本框上设置长度属性
- 如何使用Ember Ajax从Node JS Express传入数据
- jquery:使用ember的意外令牌C
- 如何对Ember Model支持的ArrayController进行排序
- 使用 Ember-Model 创建新记录
- 每当有新记录时,使用 Ember-Model 更新视图