我更多的是一个后端人试图进入前端特别是Ember。我现在已经构建了一个api,我试图创建几乎像自动完成搜索(类似于Angulars过滤器| ngModel)。这是我的api:
{
data: [
{
id: 6,
name: "Alexandrine Skiles",
links: [
{
rel: "self",
uri: "/api/v1/address-book/alexandrine-skiles"
}
]
},
{
id: 33,
name: "Ally Johns",
links: [
{
rel: "self",
uri: "/api/v1/address-book/ally-johns"
}
]
}
]
}
这是我的路线:
export default Ember.Route.extend({
model: function(){
var adapter = AddressBookAdapter.create();
var companies = adapter.findAll();
return companies;
}
});
这是适配器:
export default Ember.Object.extend({
findAll: function(){
return ajax('http://localhost:8000/api/v1/address-book/companies')
.then(function(response){
return response.data;
});
}
});
这是控制器:
export default Ember.ArrayController.extend({
searchKeyword: null,
searchResults: function(){
var searchText = this.get('searchText');
if( ! searchText) return;
var adapter = AddressBookAdapter.create();
var companies = adapter.findAll();
var regex = new RegExp(searchText, 'i');
return companies.then(function(data){
return data.filter(function(company){
return company.name.match(regex);
});
});
}.property('searchText')
});
这是html:
{{input type="text" value=searchText class="form-control" id="inputContactSearch" }}
{{#if searchResults}}
{{#each searchResult in searchResults}}
<tr>
<td>{{searchRe}}</td>
</tr>
{{/each}}
{{else}}
{{#each m in model}}
<tr>
<td><a href="{{m.links.uri}}">{{m.name}}</a></td>
</tr>
{{/each}}
{{/if}}
现在我知道我设置把手的方式并不是最好的If和Else语句。我只是想让它工作我觉得我非常接近我得到的错误是每个循环需要是一个数组而不是一个对象。但Model不是一个对象而是数组,但它仍然正确地循环它。这是解决这个问题的方法还是我完全错了。是否只有像Angular这样的直接模型过滤器,或者这种方式仍然可行。提前致谢
答案 0 :(得分:0)
所以问题是你试图迭代承诺,而不是承诺的已解决价值。为了清楚起见,适配器返回一个promise,并且在你的计算属性中,你将返回这个相同的promise。当promise解析时,它不会成为已解析的值。它执行成功或失败功能。您可以适当地分配此值。
更改控制器以使用路径模型钩子返回的模型。这个钩子阻止了承诺,因此控制器模型的价值就是公司。
public Test(Integer var1, Integer var2) {
//do irrelevant stuff here with var1 and var2
}
public void api1(Integer x, Integer y) {
// do irrelevant stuff with x and y
}
public List<String> api2(String x, Integer y, Boolean a) {
// do irrelevant stuff with x, y, and a and return a new ArrayList<String>()
}