动态内容加载视图
我有一个包含一个表的模板的一个烬组件。在我的组件中 - 我想发出ajax调用第三方服务并获取一些数据。得到这些数据后,我将不得不根据输入做出另一个随后的ajax调用。由于这需要时间,所以我想一个接一个地更新视图,当ajax调用完成时。在视觉上 - 这将是在处理完一个请求后向表中添加新行。动态内容加载视图
目前,ember只允许我们通过路由器中的model()
方法传递数组对象。
我看了几个像List-view这样的项目,但并没有解决上述问题。
编辑: -
下面是我目前在做什么 -
import Ember from 'ember';
export default Ember.Route.extend({
model() {
var list = [];
var promise = $.ajax({
type: 'GET',
url: 'thirdPartyService'
});
promise = promise.then(function(data){
data = JSON.parse(data);
return data[1];
});
promise.then(function(data){
for (var i = 0; i < data.length; i++) {
var idea = data[i];
var url = "thirdPartyService";
var secondPromise = $.ajax({
type: 'GET',
url: url,
dataType: "text"
});
secondPromise = secondPromise.then(function(data){
var result = x2js.xml_str2json(data);
return result;
});
secondPromise.then(function(data){
list.pushObject(item);
});
return secondPromise;
}
});
return list;
}
});
我的模板
<tbody>
{{#each model as |idea|}}
<tr>
<td><input type="checkbox" name="id" value="{{idea.id}}"></td>
<td>{{idea.field4}}</td>
<td>{{idea.field5}}</td>
<td>{{idea.field}}</td>
<td>{{idea.field2}}</td>
<td>{{idea.field3}}</td>
</tr>
{{/each}}
</tbody>
余烬视图将呈现列表更改时。我想要做的是 - 在调用list.pushObject(item);
时向表中添加一行。目前 - 我看到视图正在等待,直到一切都返回。
另外,这个应用程序是一个电子应用程序 - 由于这个我没有后端每说,我没有使用余烬数据。我打电话给几个第三方服务,因此没有涉及到烬模。
更新:
演示:https://ember-twiddle.com/eb79994c163dd1db4e2580cae066a318
在本演示中,我下载你的github上的数据,和回购的名单,因此模型钩将返回当两个API调用返回......最后它将提供回购商品名单。
使用loading.hbs
自动显示加载消息,直到模型挂钩承诺解决。
在您的代码中,可能覆盖promise变量不是最好的方法,因为您覆盖了尚未解析的变量。
如果您希望获得更好的用户体验,最好的方式是在模型中只有一个ajax调用,并返回该承诺...因此您的模型包含第一个承诺结果...并且您可以使用此数据在控制器中触发诺言并下载列表,以便用户可以看到表格的标题和加载消息,直到下载列表。
演示扩展了第二页:https://ember-twiddle.com/eb79994c163dd1db4e2580cae066a318
如果你必须处理在你的网页更多的车型,我会下载他们在路由处理,与RSVP.hash
。
// for example: app/routes/books.js, where books are the main model
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
books: this.store.findAll('book'),
authors: this.store.findAll('author'),
libraries: this.store.findAll('library')
});
},
setupController(controller, model) {
const books = model.books;
const authors = model.authors;
const libraries = model.libraries;
this._super(controller, books);
controller.set('authors', authors);
controller.set('libraries', libraries);
},
});
在上面的例子中,你有model
(与图书列表),authors
和libraries
在你的控制器,这样你就可以通过推动这些阵列组件。
您是否使用Ember Data访问您的服务器API或第三方服务?在这种情况下,您可以在组件中注入store
服务,并在那里使用,就像在路由处理程序中使用一样。
其他选项使用闭包动作,因此您的操作将在控制器中,您可以从组件调用这些动作,因此所有组件都只负责查看数据和其他片段。
在下面的例子中,我们创建了一个自包含组件,其中有一个按钮可以触发一个操作,该操作将使用包装在承诺中的经典jquery ajax调用从服务器下载数据,以便您可以链接这些承诺并连续解雇他们。
创建组件
$ ember g component my-component
模板app/templates/components/my-components.hbs
,有一个按钮,标志和名单。
<button {{action 'downloadSomething'}}>Download</button>
in progress: {{downloadInProgress}}
{{#each downloaded as |item|}}
{{item.name}}
{{/each}}
所连接的JS文件app/components/my-components.js
import Ember from 'ember';
const { $ } = Ember;
export default Ember.Component.extend({
downloaded: [],
actions: {
downloadSomething() {
this.set('downloadInProgress', true);
this._getData('http://localhost:8080').then(
(response) => {
this.set('downloadInProgress', false);
this.get('downloaded').pushObjects(response.contacts);
},
(error) => {
// some error handling...
}
);
}
},
// this function wraps the ajax call in a Promise
_getData(url) {
return new Ember.RSVP.Promise((resolve, reject) =>
$.ajax(url, {
success(response) {
resolve(response);
},
error(reason) {
reject(reason);
}
})
);
}
});
在Ajax响应,我们推downloaded
数组中返回的对象,所以它总是添加到列表中。
我更新了我的问题,并回答了您指出的一些问题。在我的情况下,问题是我必须迭代地从第一个Ajax请求获取数据后再发出一个Ajax请求。由于这个原因 - 我想在一次迭代结束时添加“已下载”的渲染(因为一个项目可以添加到“已下载”阵列中) – Chan
模型挂钩总是等待解析promise,所以代码运行将被暂停,直到所有的承诺返回并解决...您可以使用'loading.hbs'来显示一个微调,直到模型解决...我更新了我的答案与一个烬 - twiddle的例子... – Zoltan
演示扩展一秒页面:https://ember-twiddle.com/eb79994c163dd1db4e2580cae066a318 – Zoltan
严。 Ember允许各种绑定。只需要在控制器或路由中预定义即可。请告诉我们您尝试了什么或您正在寻找什么。目前的问题太广泛,无法回答或做出假设。 –
@kristjanreinhold我用当前的工作模型和我的环境的一些细节(我正在构建一个电子应用程序)改进了答案 – Chan