【问题标题】:how to handle votes in ember.js?如何处理 ember.js 中的投票?
【发布时间】:2013-09-26 06:48:33
【问题描述】:

我一直在学习 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>

【问题讨论】:

    标签: javascript jquery html ember.js


    【解决方案1】:

    您可以像this 一样实现这一目标。

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

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

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

    【讨论】:

    • 如何使单个帖子在帖子路由中的样式与在索引路由中的样式不同?
    • 我不确定我是否理解 - 您可以简单地调整帖子模板中的格式。或者你想要有两种呈现帖子的方式?
    • 在我的模板中,我有一个用于索引模板中呈现的文章的类,而在帖子模板中有一个不同的类,但是如果我按照你告诉我的操作,我会丢失索引模板中的类,正确如果我错了,我。
    • 啊,我明白你在说什么。是的,但是您可以在 {{render}} 帮助程序中调用任何模板(不必是 post)。但我认为this 是你所追求的。这是原始 jsFiddle 的修改版本。
    • 太棒了,你帮助了我,我正在学习我正在用我将继续尝试和做的框架给婴儿步:D
    猜你喜欢
    • 1970-01-01
    • 2019-03-23
    • 2018-01-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-14
    相关资源
    最近更新 更多