访问 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('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>
在 Ember.Select 中,您需要使用 controllers
而不是 controller
contentBinding="controller.tags.content"
。因为需要在控制器属性中添加引用的控制器。在您的情况下,您在AssetsController
中具有needs: ['tags']
,因此在资产模板中,您只需使用 controllers.tags
即可访问该实例。
这是更新的选择:
{{view Ember.Select
contentBinding="controllers.tags.content"
optionValuePath="content.id"
optionLabelPath="content.name"
valueBinding="selectedTag"
prompt="Select a tag"
}}
为了能够筛选数据,可以创建依赖于 selectedTag
的计算属性。并使用selectedTag
值过滤内容。如下所示:
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')
});
在模板中,您可以在每个帮助程序中引用该属性:
{{#each assetsByTag}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
</tr>
{{/each}}
这是工作小提琴 http://jsfiddle.net/marciojunior/gqZj3/
相关文章:
- 如何从另一个控制器更新控制器的ng重复模型
- LoopBack访问另一个模型
- AngularJS从另一个数据模型访问数据模型
- 在 Backbone 中将数据从一个模型传递到另一个模型
- 默认情况下,一个模型属性等于 sail.js 模型中的另一个模型属性
- 主干:如何在视图中将一个模型替换为另一个模型
- 访问 Ember.js 中的另一个模型数据
- 将主干模型属性值设置为另一个模型
- AngularJS请求模型在另一个模型创建[NodeJS]之前
- AngularJS:如果ng模型被另一个模型填充,如何让它受到影响
- 在另一个模型中引用/填充猫鼬模型时出现问题
- 我应该如何创建一个作用域到另一个模型的主干集合
- 当模型依赖于另一个模型时创建模型
- 从一个模型到另一个模型的引用var在Backbone中返回默认值
- 在具有从另一个模型角度设置的值的输入字段上使用ng模型
- Mongoose/MongoDb,如何针对另一个模型验证ID数组
- 显示/隐藏基于下拉选择在knockoutJS与模型内部的另一个模型
- Mongoose -使用require引用另一个模型
- 更新引用另一个模型而不重复的属性
- 将下拉列表中的默认选择分配给另一个模型中的模型类