筛选 ember 个模型
filter an ember model
我更像是一个后端人员,试图专门进入前端 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 这样的直接模型过滤器,或者这种方式是否仍然可行。提前致谢
所以问题是您正在尝试迭代承诺,而不是承诺的已解决值。需要明确的是,适配器 returns 是一个承诺,而在您计算的 属性 中,您将返回相同的承诺。当承诺解决时,它不会成为已解决的值。它执行成功或失败函数。由您适当地分配此值。
更改您的控制器以使用从路线的模型挂钩返回的模型。这个钩子阻止了承诺,所以你的控制器模型的价值是公司。
export default Ember.ArrayController.extend({
searchKeyword: null,
searchResults: function(){
var searchText = this.get('searchText');
if( ! searchText) return;
//YOUVE ALREADY GOT THE COMPANIES DONT GO BACK TO THE SERVICE
var companies = this.get('model');
var regex = new RegExp(searchText, 'i');
return companies.filter(function(company){
return company.name.match(regex);
});
}.property('searchText', 'model')
});
我更像是一个后端人员,试图专门进入前端 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 这样的直接模型过滤器,或者这种方式是否仍然可行。提前致谢
所以问题是您正在尝试迭代承诺,而不是承诺的已解决值。需要明确的是,适配器 returns 是一个承诺,而在您计算的 属性 中,您将返回相同的承诺。当承诺解决时,它不会成为已解决的值。它执行成功或失败函数。由您适当地分配此值。
更改您的控制器以使用从路线的模型挂钩返回的模型。这个钩子阻止了承诺,所以你的控制器模型的价值是公司。
export default Ember.ArrayController.extend({
searchKeyword: null,
searchResults: function(){
var searchText = this.get('searchText');
if( ! searchText) return;
//YOUVE ALREADY GOT THE COMPANIES DONT GO BACK TO THE SERVICE
var companies = this.get('model');
var regex = new RegExp(searchText, 'i');
return companies.filter(function(company){
return company.name.match(regex);
});
}.property('searchText', 'model')
});