因为我在使用余烬的几天。 在观看了一些指南后,我试着制作一个类似于入门示例的余烬应用程序。
但我有问题,我找不到解决方案。 我构建了一个“帖子”模板,该模板显示了所有帖子的列表,其中有一个像作者等视图的参数。 然后我写了一个帖子模板,你可以在其中看到这篇文章的更多细节。 如果您在一个帖子上单击posts-List,那么它应该链接到带有帖子的新站点。 Post-Id应该在路由的url中,但是doesent work ..链接(或id)总是'undefined'。
模板:
<script type="text/x-handlebars" id="posts">
<div class="container">
<div class="row">
<div class="col-md-10">
{{#each}}
<div class="postcontainer">
<div class = "voteSection">
<div class="pointAndVotingUp">
<span class="glyphicon glyphicon-circle-arrow-up"></span>
</div>
<div class="points">
{{votesUp}}
</div>
<div class="pointAndVotingDown">
<span class="glyphicon glyphicon-circle-arrow-down"></span>
</div>
</div>
<div class= "postSection">
<div class="post">
{{#link-to 'post' this }}
{{title}}
{{/link-to}}
{{format-markdown content}}
<small class="muted">asked {{format-date time}} by {{author}}</small>
</div>
<div class= "tagSection">
<div class= "tag">
{{tag1}}
</div>
<div class= "tag">
{{tag2}}
</div>
<div class= "tag">
{{tag3}}
</div>
</div>
<div class= "answerSection">
3 people already answered.
{{#link-to 'post' this }}
Submit your own answer...
{{/link-to}}
</div>
</div>
</div>
{{/each}}
</div>
<!--
<div class="span9">
{{outlet}}
</div>
-->
</div>
</div>
</script>
<script type="text/x-handlebars" id="post">
<h1>{{title}}</h1>
<hr>
<!--
<div class='intro'>
{{format-markdown excerpt}}
</div>
-->
<div class='below-the-fold'>
{{format-markdown content}}
</div>
<h2>by {{author}} <small class='muted'>({{format-date date}})</small></h2>
{{#if isEditing}}
{{partial 'post/edit'}}
<button class="btn btn-default" {{action 'doneEditing'}}>Done</button>
{{else}}
<button class="btn btn-default" {{action 'edit'}}>Edit</button>
{{/if}}
</script>
<script type="text/x-handlebars" id="post/_edit">
<p>{{input type="text" value=title}}</p>
<p>{{input type="text" value=excerpt}}</p>
<p>{{textarea value=body}}</p>
</script>
EmberApp:
App.Router.map(function () {
this.resource('about');
this.resource('posts');
this.resource('post', { path: '/posts/:post_id'});
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return jQuery.getJSON("/posts/" + params.post_id);
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
return posts.findBy('id', params.post_id);
},
serialize: function(model) {
// this will make the URL `/posts/12`
return { post_id: model.id };
}
});
App.PostController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function() {
this.set('isEditing', true);
},
doneEditing: function() {
this.set('isEditing', false);
}
}
});
目前这些帖子都是硬编码的:
var posts = [{
_id: '1',
points: 10,
title: "foo title",
author: { name: "Hans" },
date: new Date(2013, 11, 12),
excerpt: "foo text foo"
}, ...
有人可以告诉我哪里出错了吗?
Settings:
DEBUG: ----ember-1.2.0.js:3386
DEBUG: Ember : 1.2.0 ember-1.2.0.js:3386
DEBUG: Handlebars : 1.1.2 ember-1.2.0.js:3386
DEBUG: jQuery : 1.10.2 ember-1.2.0.js:3386
DEBUG: -------------------------------