Javascript 如何在ember.js中处理投票？_Javascript_Jquery_Html_Ember.js

Javascript 如何在ember.js中处理投票？

javascript jquery html ember.js

Javascript 如何在ember.js中处理投票？,javascript,jquery,html,ember.js,Javascript,Jquery,Html,Ember.js,我一直在学习ember.js，我有这个jsfiddle的代码，如果你检查一下，你会发现我可以在点击一个特定的帖子名称后进行上下投票，但是当我在索引路径中时，我不能进行投票汇总，我做错了什么？控制台说什么也不能处理这个动作这是app.js App = Ember.Application.create(); App.Router.map(function () { this.resource('posts'); this.resource('post', { pa

我一直在学习ember.js，我有这个jsfiddle的代码，如果你检查一下，你会发现我可以在点击一个特定的帖子名称后进行上下投票，但是当我在索引路径中时，我不能进行投票汇总，我做错了什么？控制台说什么也不能处理这个动作

这是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>

你可以这样做

实际上，您没有呈现posts模板，而是呈现“索引”模板及其关联的生成控制器。因此，您的“PostController”从未被使用过，所有的“voteUp”和“voteDown”操作都转到了生成的应用程序索引控制器。以下内容修复了它：

  <script type="text/x-handlebars" data-template-name="index">
    {{#each model}}
        {{render 'post' this}}
    {{/each}}
  </script>

更新：这就是问题的答案。

我如何使个人帖子在帖子路径中的样式与在索引路径中的样式不同？我不确定我是否理解-您可以简单地调整帖子模板中的格式。或者你想有两种方式来呈现一篇文章？在我的模板中，我有一个在索引模板中呈现文章的类，在帖子模板中有一个不同的类，但是如果我按照你说的做，我会在索引模板中丢失类，如果我错了，请纠正我。啊，我明白你的意思了。是的，但是您可以在{{render}}辅助程序中调用该模板，而不必使用post。但我想这就是你想要的。这是您原来的JSFIDLE的一个修改版本。太好了，您已经帮助了我，我正在学习我正在给babysteps提供的框架，我将继续尝试和做：D