添加模型数据后，Ember模板无法正确渲染

Question

我可能还有一些非常愚蠢的东西......

将夹具数据添加到区域路径后，“区域”模板将不会渲染。模板之外的所有内容仍然可以很好地呈现。如果我注释掉我将作为模型传入的数据返回的行（即'// return this.store.find（'gamearea'，1）;'），所有内容都按预期呈现，减去夹具数据，显然。当模板无法正确渲染时，Ember也不会抛出任何类型的错误。

最终，我将完全用游戏区组件替换游戏区内的div。我现在处于中间阶段。无论如何，谢谢你的帮助。

以下是相关代码：

编辑：代码稍微过时，最好的选择是去jsbin：

jsbin.com/jomema/1/edit?html,css,js,output

//my areas route:

Areas.Router.map(function () {
	this.resource('areas', {path: '/'});
});

Areas.AreasRoute = Ember.Route.extend({
	model: function () {
		return this.store.find('gamearea', 1);
	},
	
	actions: {
		drawCard: function () {
			var $cards = $("#lib1").children();
			$("#hand1").append($cards[0]);
			var cards = this.store.all('card').filterBy('location', 'lib1');
			console.log(cards.objectAt(0).get('location'));
			cards.objectAt(0).set('location', "hand1");
			console.log(cards.objectAt(0).get('location'));
			
		}
	}
});

//the fixture data and model definitions:

Areas.Card = DS.Model.extend({
	name: DS.attr("string"),
	img: function() {
		return ("http://mtgimage.com/card/" + this.get("name") + ".jpg");
	}.property("name"),
	domid: function () {
		return ("card"+this.get("id"));
	}.property("id"),
	location: DS.attr('string', {defaultValue: "lib1"})
});

Areas.Gamearea = DS.Model.extend({
	zones: DS.hasMany('zones', {async: true})
});

Areas.Zone = DS.Model.extend({
	name: DS.attr('string'),
	cards: DS.hasMany('cards', {async: true}),
	zone: DS.belongsTo('zone')
});


Areas.Zones.reopenClass({
FIXTURES: [

	{id: 1, name: 'lib1', cards: [1,2,3,4,5]},
	{id: 2, name: 'lib2', cards: [6,7,8,9,10]}
	]

});
Areas.Cards.reopenClass({
FIXTURES:  
[		
		{
			id: 1,
			name: "Island",
			zone: 1
		},{
			id: 2,
			name: "Jace, the Mind Sculptor",
			zone: 1
		},{
			id: 3,
			name: "Island",
			zone: 1
		},{
			id: 4,
			name: "Counterspell",
			zone: 1
		},{
			id: 5,
			name: "Island",
			zone: 1
		},
		{
			id: 6,
			name: "Island",
			zone: 2
		},{
			id: 7,
			name: "Jace, the Mind Sculptor",
			zone: 2
		},{
			id: 8,
			name: "Island",
			zone: 2
		},{
			id: 9,
			name: "Counterspell",
			zone: 2
		},{
			id: 10,
			name: "Island",
			zone: 2
		}
]
});
Areas.Gamearea.reopenClass({
FIXTURES: 
{
	id: 1,
	zones: [1,2]
}
});

<script type="text/x-handlebars" data-template-name="areas">
	<div id="gamearea">
		<div id="top1" class="top p1">Top</div><button id="deck1" class="deck p1" {{action 'drawCard'}}></button><div id="bot1" class="bot p1">Bot</div>
		<div id="lib1" class="zone display-zone p1 library">

		</div>
		
		{{game-zone cards=model.lib1}}
		{{game-zone cards=model.hand1}}
		
		
		<div id="hand1" class="zone display-zone p1 hand">
		</div>
		<div id="battlefield1" class="zone display-zone p1 battlefield"></div>
		<div id="graveyard1" class="zone display-zone p1 graveyard"></div>
		<div id="exile1" class="zone display-zone p1 exile"></div>
		<div id="revealed1" class="zone display-zone p1 revealed"></div>
		<br>
		<hr>
		<br>
		<div id="top2" class="top p2">Top</div><div id="deck2" class="deck p2"></div><div id="bot2" class="bot p2">Bot</div>
		<div id="lib2" class="zone display-zone p2 library"></div>
		<div id="hand2" class="zone display-zone p2 hand"></div>
		<div id="battlefield2" class="xone display-zone p2 battlefield"></div>
		<div id="graveyard2" class="zone display-zone p2 graveyard"></div>
		<div id="exile2" class="zone display-zone p2 exile"></div>
		<div id="revealed2" class="zone display-zone p2 revealed"></div>
		
		<button type="button" class="btn btn-primary menu-btn">Menu</button>
		<button type="button" class="btn btn-success to-top">To Top</button>
		
	</div>
</script>

<script type="text/x-handlebars" data-template-name="components/card-component">
	<img {{bind-attr id=card.domid alt=card.name src=card.img}} draggable="true" class="card" {{action "droppedCard" on="drop"}}>
</script>

<script type="text/x-handlebars" data-template-name="components/game-zone">
	{{#each card in cards}}
		{{card-component card=card}}
	{{/each}}
</script>