我有一个正在尝试构建的小型资产跟踪系统。我有很多资产,也有很多标签。资产有很多标签,反之亦然
我希望能够从列表中选择一个标签,并仅显示属于所选标签的资产。
我很难弄清楚如何让选择视图显示标签列表。我有一种感觉,这与我的路线有关......
我正在尝试使用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]
}];
小胡子 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>