如何处理ember.js中的投票？ [英] how to handle votes in ember.js?
问题描述
我被困在学习ember.js我有这个jsfiddle的代码 http://jsfiddle.net/GgGGD / 18 / 如果你检查出来，你会看到我可以投票一下，一旦我点击了一个特定的职位名称，但是当我在索引路线，我不能让总结或下降，我究竟做错了什么？控制台说没有处理这个动作。
I am stuck studying ember.js I have this jsfiddle with the code http://jsfiddle.net/GgGGD/18/ if you check it out you will see that I can vote up and down once I have clicked a particular post name but when I am in the index route I can't make the votes sum up or down, what am I doing wrong? the console says nothing handles the action.
这是app.js
App = Ember.Application.create();
App.Router.map(function () {
this.resource('posts');
this.resource('post', {
path: ':post_id'
});
});
App.AplicationRoute = Ember.Route.extend({
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return posts;
}
});
App.PostsRoute = Ember.Route.extend({
model: function () {
return posts;
}
});
App.PostController = Ember.ObjectController.extend({
//initial value
actions: {
voteUp: function () {
this.set('votes', this.get('votes') + 1);
},
voteDown: function () {
console.log("voting down");
this.set('votes', this.get('votes') - 1);
}
}
});
var posts = [{
id: '1',
title: "Rails is Omakase",
img: "img/img1.jpg",
author: {
name: "d2h"
},
date: new Date('12-27-2012'),
votes: 50,
excerpt: "There are lots of à la carte software environments in this world. Places where in order to eat, you must first carefully look over the menu of options to order exactly what you want.",
body: "I want this for my ORM, I want that for my template language, and let's finish it off with this routing library. Of course, you're going to have to know what you want, and you'll rarely have your horizon expanded if you always order the same thing, but there it is. It's a very popular way of consuming software.\n\nRails is not that. Rails is omakase."
}, {
id: '2',
title: "The Parley Letter",
img: "img/img2.jpg",
author: {
name: "d2h"
},
date: new Date('12-24-2012'),
votes: 546,
excerpt: "My [appearance on the Ruby Rogues podcast](http://rubyrogues.com/056-rr-david-heinemeier-hansson/) recently came up for discussion again on the private Parley mailing list.",
body: "A long list of topics were raised and I took a time to ramble at large about all of them at once. Apologies for not taking the time to be more succinct, but at least each topic has a header so you can skip stuff you don't care about.\n\n### Maintainability\n\nIt's simply not true to say that I don't care about maintainability. I still work on the oldest Rails app in the world."
}
];
这是html
<body>
<script type="text/x-handlebars">
<header>
<figure id="header_logo">
<a href=""><img src="img/logo.png" alt="logo"></a>
</figure>
<div id="header_titulo">
<h2>Puls3 - Dolor Sit amet</h2>
<nav>
<ul>
<li> {{#linkTo 'index'}}Home{{/linkTo}} </li>
<a href="https://github.com/herrkin/puls3-ember"><li>GitHub</li></a>
</ul>
</nav>
</div>
<figure id="header_user" >
<a href=""><img src="img/user.jpg"></a>
</figure>
</header>
<section id="contenido">
{{outlet}}
</section>
</script>
<script type="text/x-handlebars" data-template-name="index">
<!-- item -->
{{#each model}}
<article class="contenido_item">
{{#link-to 'post' this}}<h2>{{title}}</h2>
<p class="item_posted">Posted by {{author.name}}</p>{{/link-to}}
<p class ="extra_tag">tagname</p>
<a class="likes_up" href="#" {{action "voteUp" this}}> up</a>
<div class="likes_numero">{{votes}}</div>
<a class="likes_down" href="#" {{action "voteDown" this }}></span> down</a>
</article>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="post">
<!-- item -->
<article class="contenido_item">
{{#link-to 'post' this}}<h2>{{title}}</h2>
<p class="item_posted">Posted by {{author.name}}</p>{{/link-to}}
<p class ="extra_tag">tagname</p>
<a class="likes_up" href="#" {{action "voteUp" this}}> up</a>
<div class="likes_numero">{{votes}}</div>
<a class="likes_down" href="#" {{action "voteDown" this }}></span> down</a>
</article>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0/ember.min.js
"></script>
</body>
推荐答案
你可以实现像这个。
您实际上没有呈现帖子模板，而是渲染index模板及其关联（生成）控制器。因此，您的PostController从未使用过，所有的voteUp和voteDown操作都将转到生成的应用程序索引控制器。以下修正：
You were actually not rendering the posts template, but were rendering the 'index' template with its associated (generated) controller. Thus your 'PostController' was never used and all the 'voteUp' and 'voteDown' actions went to the generated application index controller. The following fixed it:
<script type="text/x-handlebars" data-template-name="index">
{{#each model}}
{{render 'post' this}}
{{/each}}
</script>
更新：这个jsFiddle 是什么回答了这个问题。
UPDATE: This jsFiddle was what answered the question.
这篇关于如何处理ember.js中的投票？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
