访问ember.js中的另一个模型数据 [英] accessing another models data in ember.js
问题描述
我希望能够从列表中选择一个标签，并只显示属于所选标签的资产。
我很难想出如何让选择视图显示标签列表。我有一种感觉，它与我的路线有关...
我正在尝试使用 this.controllerFor（'tags'）。 set（'content'，this.store.find（'tag'）将标签数据传递到资产路线，但似乎没有正确设置数据...
我也意识到我缺乏过滤列表的逻辑。
http://jsfiddle.net/viciousfish/g7xm7/
Javascript代码：
App = Ember.Application.create（{
ready：function（）{
console.log（'App ready'）;
}
}）;
App.ApplicationAdapter = DS.FixtureAdapter.extend（）;
// ROUTER
App.Router.map（function（）{
this.resource（'assets'，{path：'/'}）;
this.resource（'标签'，{path：'/ tags'}）;
}）;
// ROUTES
App.AssetsRoute = Ember.Route.extend（{
型号：功能ion（）{
return this.store.find（'asset'）;
}，
setupController：function（controller，model）{
this._super（controller，model）;
this.controllerFor（'tags'）。set（'content'，this.store.find（'tag'））;
}
}）;
//标签控制器加载所有标签列表在选择视图
App.TagsController = Ember.ArrayController.extend（）;
App.AssetsController = Ember.ArrayController.extend（{
需要：['tags']，
selectedTag：null
}）;
// MODEL
App.Asset = DS.Model.extend（{
name：DS.attr（'string'），
tags ：DS.hasMany（'tag'）
}）;
App.Tag = DS.Model.extend（{
name：DS.attr（'string'），
assets：DS.hasMany（'asset'）
}）;
// FIXTURE DATA
App.Asset.FIXTURES = [
{
id：1，
name：fixture1，
标签：[1,2]
}，
{
id：2，
名称：fixture2，
标签：[1]
} ，
{
id：3，
名称：fixture3，
标签：[2]
}];
App.Tag.FIXTURES = [
{
id：1，
name：'Tag1'，
assets：[1,2]
}，
{
id：2，
name：'Tag2'，
assets：[1,3]
}];
Moustachioed HTML：
< body>
< script type =text / x-handlebarsdata-template-name =assets>
{{查看Ember.Select
contentBinding =controller.tags.content
optionValuePath =content.id
optionLabelPath =content.name
valueBinding =selectedTag
}}
< table>
< tr>
< td>ID< / td>
< td>名称< / td>
< / tr>
{{#each}}
< tr>
< td> {{id}}< / td>
< td> {{name}}< / td>
< / tr>
{{/ each}}
< / table>
< / script>
< / body>
在您的Ember.Select中，您有 contentBinding =controller.tags.content您需要使用控制器而不是 controller 。因为需要在控制器属性中添加引用的控制器。在您的情况下，您在 AssetsController 中有需求：['tags'] ，所以在资产模板中，您只需要使用 controllers.tags 访问该实例。
这是更新的选择：
{{查看Ember.Select
contentBinding =controllers.tags.content
optionValuePath =content.id
optionLabelPath =content.name
valueBinding =selectedTag
prompt =选择一个标签
}}
为了能够过滤数据，您可以创建取决于 selectedTag 的计算属性。并使用 selectedTag 值过滤内容。如下所示：
App.AssetsController = Ember.ArrayController.extend（{
需要：['tags'] ，
selectedTag：null，
assetsByTag：function（）{
var selectedTag = this.get（'selectedTag'）;
var found = [];
this .get（'model'）forEach（function（asset）{
return asset.get（'tags'）。forEach（function（tag）{
if（tag.get（'id' === selectedTag）{
found.pushObject（asset）;
}
}）;
}）;
返回找到;
} .property （'selectedTag'）
}）;
在模板中，您可以在每个帮助器中引用该属性：
{{＃assets assetsByTag}}
< tr>
< td> {{id}}< / td>
< td> {{name}}< / td>
< / tr>
{{/ each}}
这是工作小提琴 http://jsfiddle.net/marciojunior/gqZj3/
I have a little asset tracking system that I am trying to build. I have many assets, and I have many tags. Assets have many tags and viceaversa
I would like to be able to select a tag from a list, and display only the assets that belong to the selected tag.
I am having a hard time trying to figure out how to get the select view to show the list of tags. I have a feeling that it has to do with my routes...
I am trying to use this.controllerFor('tags').set('content', this.store.find('tag') to pass the tag data into the assets route, but it doesn't seem to be setting the data properly...
I also realize that I am lacking logic to filter the list.
http://jsfiddle.net/viciousfish/g7xm7/
Javascript Code:
App = Ember.Application.create({
ready: function() {
console.log('App ready');
}
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
//ROUTER
App.Router.map(function () {
this.resource('assets', { path: '/' });
this.resource('tags', { path: '/tags' });
});
//ROUTES
App.AssetsRoute = Ember.Route.extend({
model: function () {
return this.store.find('asset');
},
setupController: function(controller, model) {
this._super(controller, model);
this.controllerFor('tags').set('content', this.store.find('tag') );
}
});
//Tags Controller to load all tags for listing in select view
App.TagsController = Ember.ArrayController.extend();
App.AssetsController = Ember.ArrayController.extend({
needs: ['tags'],
selectedTag: null
});
//MODEL
App.Asset = DS.Model.extend({
name: DS.attr('string'),
tags: DS.hasMany('tag')
});
App.Tag = DS.Model.extend({
name: DS.attr('string'),
assets: DS.hasMany('asset')
});
//FIXTURE DATA
App.Asset.FIXTURES = [
{
id: 1,
name: "fixture1",
tags: [1,2]
},
{
id: 2,
name: "fixture2",
tags: [1]
},
{
id: 3,
name: "fixture3",
tags: [2]
}];
App.Tag.FIXTURES = [
{
id: 1,
name: 'Tag1',
assets: [1,2]
},
{
id: 2,
name: 'Tag2',
assets: [1,3]
}];
Moustachioed HTML:
<body>
<script type="text/x-handlebars" data-template-name="assets">
{{view Ember.Select
contentBinding="controller.tags.content"
optionValuePath="content.id"
optionLabelPath="content.name"
valueBinding="selectedTag"
}}
<table>
<tr>
<td>"ID"</td>
<td>"Name"</td>
</tr>
{{#each}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
</tr>
{{/each}}
</table>
</script>
</body>
In your Ember.Select you have contentBinding="controller.tags.content" you need to use controllers instead of controller. Because needs add the referenced controller in a controllers property. In your case you have needs: ['tags'] in the AssetsController so in the assets template, you just need to use controllers.tags to access that instance.
This is the updated select:
{{view Ember.Select
contentBinding="controllers.tags.content"
optionValuePath="content.id"
optionLabelPath="content.name"
valueBinding="selectedTag"
prompt="Select a tag"
}}
To be able to filter the data, you can create a computed property that depends of selectedTag. And filter the content using the selectedTag value. Like the following:
App.AssetsController = Ember.ArrayController.extend({
needs: ['tags'],
selectedTag: null,
assetsByTag: function() {
var selectedTag = this.get('selectedTag');
var found = [];
this.get('model').forEach(function(asset) {
return asset.get('tags').forEach(function(tag) {
if (tag.get('id') === selectedTag) {
found.pushObject(asset);
}
});
});
return found;
}.property('selectedTag')
});
And in the template you reference that property in the each helper:
{{#each assetsByTag}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
</tr>
{{/each}}
This is the working fiddle http://jsfiddle.net/marciojunior/gqZj3/
这篇关于访问ember.js中的另一个模型数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
