Javascript EmberJS-显示绑定在一起的模型
我希望这是有道理的。我有一个余烬应用程序,它列出了几种类型的小屋。用户可以“收藏”一个小屋,也可以创建“组”将每个收藏放入其中。但是,我无法确定如何列出与特定组关联的所有收藏夹。我正在使用Javascript EmberJS-显示绑定在一起的模型,javascript,ember.js,Javascript,Ember.js,我希望这是有道理的。我有一个余烬应用程序,它列出了几种类型的小屋。用户可以“收藏”一个小屋,也可以创建“组”将每个收藏放入其中。但是,我无法确定如何列出与特定组关联的所有收藏夹。我正在使用DS.hasMany和DS.belongsto将模型绑定在一起,但它不起作用。我的余烬代码App.js: App = Ember.Application.create(); App.ApplicationAdapter = DS.FixtureAdapter.extend(); App.Router.map
DS.hasMany
和DS.belongsto
将模型绑定在一起,但它不起作用。我的余烬代码App.js:
App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Router.map(function() {
this.resource('groups', { path: '/groups' });
this.resource('favorites', {path: '/favorites'});
});
App.ApplicationRoute = Ember.Route.extend({
actions: {
showGroups: function() {
//this.container.lookup('view:groups').append();
this.transitionTo('groups');
}
}
});
App.ApplicationController = Ember.Controller.extend({
});
App.FavoriteController = Ember.ObjectController.extend({
needs: ['group']
});
App.GroupsController = Ember.Controller.extend({
newGroupBoolean: false,
actions: {
showNewGroupInput: function() {
switch(this.get('newGroupBoolean')) {
case false:
this.set('newGroupBoolean', true);
break;
case true:
this.set('newGroupBoolean', false);
break;
}
},
newGroupName: '',
createNewGroup: function() {
var groupName = this.get('newGroupName');
// Create the new Todo model
var group = this.store.createRecord('group', {
name: groupName
});
this.set('newGroupName', '');
group.save();
}
}
});
App.GroupController = Ember.ObjectController.extend({
actions: {
removeGroup: function() {
var group = this.get('model');
group.deleteRecord();
group.save();
},
showFavorites: function() {
this.transitionToRoute('favorites');
}
},
groupId: function() {
return this.get('id');
}
})
App.GroupsRoute = Ember.Route.extend({
model: function() {
return this.store.find('group');
}
});
App.FavoritesRoute = Ember.Route.extend({
model: function() {
return this.store.find('favorite');
}
})
App.GroupsView = Ember.View.extend({
templateName: "groups",
//classNames: ["modal", "fade"],
didInsertElement: function() {
this.$('#groupsModal').modal('show');
this.$('#groupsModal').on('hidden.bs.modal', $.proxy(this._viewDidHide,this));
},
// modal dismissed by example clicked in X, make sure the modal view is destroyed
_viewDidHide: function() {
this.get('controller').transitionToRoute('/');
},
// here we click in close button so _viewDidHide is called
close: function() {
this.$(".close").click();
}
});
App.FavoritesView = Ember.View.extend({
templateName: "favorites",
//classNames: ["modal", "fade"],
didInsertElement: function() {
this.$('#favoritesModal').modal('show');
this.$('#favoritesModal').on('hidden.bs.modal', $.proxy(this._viewDidHide,this));
},
// modal dismissed by example clicked in X, make sure the modal view is destroyed
_viewDidHide: function() {
this.get('controller').transitionToRoute('/');
},
// here we click in close button so _viewDidHide is called
close: function() {
this.$(".close").click();
}
});
App.Group = DS.Model.extend({
name: DS.attr('string'),
favorites: DS.hasMany('App.Favorite')
});
App.Group.FIXTURES = [
{
id: 1,
name: 'Family Reunion',
favorites: []
},
{
id: 2,
name: 'California Trip',
favorites: []
},
{
id: 3,
name: 'Dream Vacations',
favorites: []
},
{
id: 4,
name: 'Fun for Kids',
favorites: []
},
{
id: 5,
name: 'Awesome Trip!',
favorites: []
}
];
App.Favorite = DS.Model.extend({
name: DS.attr('string'),
notes: DS.attr('string'),
address: DS.attr('string'),
group: DS.belongsTo('App.Group'),
photo: DS.attr('string'),
});
App.Favorite.FIXTURES = [
{
id:1,
name: 'Clearwater Historic Lodge and Canoe Outfitters',
notes: 'This is some notes about this favorite',
address: '774 Clearwater Road, Grand Marais, MN 55604',
group: 1,
photo: 'This is a note with some awesome content!',
},
{
id:2,
name: 'Teton Lodge',
notes: 'This is some notes about this favorite',
address: '774 Clearwater Road, Grand Marais, MN 55604',
group: 1,
photo: 'This is a note with some awesome content!',
},
{
id:3,
name: 'Some Awesome Lodge',
notes: 'This is some notes about this favorite',
address: '774 Clearwater Road, Grand Marais, MN 55604',
group: 2,
photo: 'This is a note with some awesome content!',
},
{
id:4,
name: 'The Best Lodge Ever',
notes: 'This is some notes about this favorite',
address: '774 Clearwater Road, Grand Marais, MN 55604',
group: 3,
photo: 'This is a note with some awesome content!',
}
];
模板:
<script type="text/x-handlebars" data-template-name="application">
<div class="content">
{{outlet}}
</div>
<script>
<!-- MY GROUPS MODAL -->
<script type="text/x-handlebars" data-template-name="groups">>
<div class="modal fade" id="groupsModal">
<div class="modal-dialog favoritesGroupModal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title tertiaryHeading">My Favorite Groups</h4>
</div>
<div class="modal-body">
{{#each model}}
{{render "group" this}}
{{/each}}
{{#if newGroupBoolean}}
<div class="input-group newGroupInput">
{{input value=newGroupName class="form-control" type="text" placeholder="Type group name here"}}
<span class="input-group-btn">
<button class="btn btn-default actionBtn" type="button" {{action createNewGroup}}><span class="glyphicon glyphicon-ok"></span></button>
</span>
</div><!-- /input-group -->
{{else}}
 
{{/if}}
</div>
<div class="modal-footer">
<button type="button" class="btn actionBtn groupBtnContainer" {{action showNewGroupInput}}>Create New Group</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</script>
<!-- MY GROUPS MODAL -->
<script type="text/x-handlebars" data-template-name="group">
<div class="groupBtnContainer">
<button class="btn trashBtn" {{action removeGroup item}}><span class="glyphicon glyphicon-trash"></span></button><button class="btn secondaryBtn groupBtn" {{action showFavorites}}>{{name}}</button><button class="btn secondaryBtn"><span class="glyphicon glyphicon-share"></span></button>
{{#each favorites}}
{{name}}
{{/each}}
</div>
</script>
<!-- MY FAVORITES MODAL -->
<script type="text/x-handlebars" data-template-name="favorites">>
<div class="modal fade" id="favoritesModal">
<div class="modal-dialog favoritesGroupModal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title tertiaryHeading">My Favorites</h4>
</div>
<div class="modal-body">
{{#each model}}
{{render "favorite" this}}
{{/each}}
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</script>
<script type="text/x-handlebars" data-template-name="favorite">
<div class="groupBtnContainer">
{{name}}
</div>
</script>
<!-- MY FAVORITES MODAL -->
{{outlet}}
>
&时代;
我最喜欢的团体
{{{#每个模型}
{{呈现“组”此}
{{/每个}}
{{{#if newGroupBoolean}
{{input value=newGroupName class=“form control”type=“text”placeholder=“type group name here”}
{{else}
 
{{/if}
创建新组
{{name}}
{{{#每个收藏夹}
{{name}}
{{/每个}}
>
&时代;
我的最爱
{{{#每个模型}
{{呈现“最爱”这个}
{{/每个}}
{{name}}
我的问题之一是控制台报告:断言失败:找不到“App.Favorite”的模型。
您使用的是什么版本的余烬数据?如果您使用的是较新的版本之一,则需要使用命名约定而不是全局名称来引用关系:收藏夹:DS.hasMany('App.Favorite')
变成收藏夹:DS.hasMany('Favorite')
我认为您需要用ID填充收藏夹
数组。