1

我一直在学习 ember.js 我有这个带有代码http://jsfiddle.net/GgGGD/18/的 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>
4

1 回答 1

0

你可以像这样实现。

您实际上并没有渲染posts模板,而是渲染“索引”模板及其关联的(生成的)控制器。因此,您的“PostController”从未使用过,所有“voteUp”和“voteDown”操作都转到生成的应用程序索引控制器。以下修复了它:

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

更新:这个 jsFiddle回答了这个问题。

于 2013-09-20T19:33:43.830 回答