我最近在看Emberjs,发现了它的一个主要贡献者写的一篇很有用的文章:关于&Ember.js使用说明
它带我通过一个例子,从服务器获取用户数据列表,并呈现在屏幕上。我将简要说明它是如何工作的:
- 应用程序通过ajax联系服务器获取用户数据列表呼叫 在ajax调用结束时,返回一个空枚举对象立即,稍后用作控制器的属性。ajax调用完成后,它用数据填充枚举依次更新控制器的属性,最后触发一个自动重新呈现。
只要不重新访问列表,就可以正常工作。当用户重新访问列表时,假设他/她导航到另一个状态,然后返回,逻辑将再次被触发,从服务器获取数据并填充列表。然而,这次列表不是空的!这样我们就有了一个重复数据的列表。我想通过在ajax调用成功时清除列表的内容来解决这个问题。下面是ajax调用的代码:
allAwesomebergs: [],
fetch: function(){
$.ajax({
url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
dataType: 'jsonp',
context: this,
success: function(response) {
response.data.forEach(function(awesomeberg){
this.allAwesomebergs.addObject(App.Awesomeberg.create(awesomeberg))
}, this);
}
});
return this.allAwesomebergs;
},
上面的代码没有清除列表的内容。我尝试在成功函数的开头添加一行"allAwesomebergs =[]",但我得到的只是一个空白屏幕。我想我可能没有正确地这样做,但是我看了Ember的文档,没有看到任何关于清除Enumerable内容的内容。
因此,问题是:解决这个重复加载问题的最简单方法是什么?在手之前清除内容似乎是最明显的,但我无法做到这一点。您可以在开始添加新对象之前调用clear()
。
新代码将是:
allAwesomebergs: [],
fetch: function(){
$.ajax({
url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
dataType: 'jsonp',
context: this,
success: function(response) {
this.allAwesomebergs.clear();
response.data.forEach(function(awesomeberg){
this.allAwesomebergs.addObject(App.Awesomeberg.create(awesomeberg))
}, this);
}
});
return this.allAwesomebergs;
},
我认为你的方法是好的,但它应该是:
this.allAwesomebergs = []
这一切都是关于它前面的这个。所以这里不需要明确。