javascript - 如何处理 ember.js 中的投票？-6ren

javascript - 如何处理 ember.js 中的投票？

转载作者：行者123 更新时间：2023-11-28 08:52:53

25

4

我一直在研究 ember.js 我有这个 jsfiddle 代码 http://jsfiddle.net/GgGGD/18/如果你检查一下，你会发现，一旦我点击了特定的帖子名称，我就可以向上或向下投票，但是当我在索引 route 时，我无法向上或向下投票，我做错了什么？控制台说没有任何处理该操作。

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

最佳答案

您可以像 this 那样实现这一点。

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

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

更新:This jsFiddle这就是问题的答案。

关于javascript - 如何处理 ember.js 中的投票？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18924256/

25

4

0

文章推荐： javascript - 单击图像时jQuery shuffle div

文章推荐： javascript - 如何使用 oauth 发出 twitter get 请求？

文章推荐： javascript - Safari 和 Firefox 使用 Canvas 显示锯齿线

文章推荐： javascript - Wookmark Jquery UI 不工作

ember.js - Ember 表与 Ember 模型/Ember 数据集成
我正在尝试将 ember-models 链接到 ember-table，以从服务器提取分页记录，并在向下滚动时将它们添加到表中。我可以通过请求我的 api url 和页码来让它工作，就像 http:
ember.js - Ember 数据和 Ember StateManager
我有一个应用程序，它使用 ember-data 来持久化数据和 StateManager 来驱动其全局状态。由于加载数据是异步的，我想知道如何捕获表示所有数据都已加载的事件。准确地说，我有一个名为“
ember.js - Ember Ember.select 获取选定值
我有一个简单的 Ember 应用程序，其中有一个输入框、两个选择框和一个按钮。我可以在“doSearch”方法中访问输入框的值，但不能访问选择框的值。到目前为止，我没有尝试任何工作 - 我注释掉了我
ember.js - 没有 Ember 数据的 Ember-CLI，使用普通的 ember 对象代替
我使用 Ember-CLI 来构建我的 ember 应用程序，但我不想使用 Ember Data。默认情况下，当你输入这个命令:ember generate model Person 时，ember
ember.js - 我如何将我的 Ember CLI 插件拆分为一个普通的 Ember 库和一个 Ember CLI 插件包装器？
我按照 Ember CLI 主页的说明创建了我的第一个 Ember CLI 插件。该插件运行良好，并且已经在 Github 上获得了几颗星:https://github.com/lolmaus/emb
ember.js - Ember 计算属性 vs Ember Observer
我在这里看到的以前的问题似乎都没有涵盖何时使用 Ember 计算属性与 Ember Observer 的主题。我知道计算属性使用以前的属性来帮助生成新属性并在运行循环中更新。 Person = Emb
ember.js - Ember : downgrading ember with bower install
我一直在 git 分支上切换到 1.13.2 版本的 ember，现在我想在返回另一个分支时回到 1.11.1。我一直在运行npm install和 bower install没有失败。但是当我运
ember.js - 使用 ember-qunit 对基于 ember-cli 构建的 ember 应用程序运行测试时，如何使源映射正常工作
我有一个使用 ember-cli 构建的 Ember 应用程序我正在使用 ember-qunit 编写我的测试使用 testem 测试适配器并在浏览器中运行它们按照 ember-cli 中的说明文档。
ember.js - Ember-data 转换不适用于 ember-cli
项目设置: Ember:2.0.0 Ember 数据:2.0.0 Ember-cli:1.13.8 我创建了一个转换:转换/isodate.js import DS from 'ember-data'
ember.js - Ember 如何将变量传递给 Ember.compulated.filterBy
假设我有一个具有 2 个属性的组件:我如何能够基于 localID 属性和 Ember.compulated.filterBy 宏创建计算属性？ localID: 2, data: [ { i
ember.js - 在 Ember-CLI 内升级 Ember
我刚刚创建了一个新的 Ember-CLI app (v0.1.12)，并注意到 Ember 的引用版本是 v1.8.1 (bower.json)。我想要 recently released 1.10我
ember.js - Ember Mirage 未将模型作为 ember 对象传递
使用最新的 Ember (3.2)、ember-cli-mirage 0.4.7、ember-cli-qunit 4.3.2、ember-qunit 3.4.1 我正在使用 ember-cli-mir
ember.js - Ember-CLI 'Ember Update' 命令
我是一名 ember 菜鸟，正在阅读 ember-cli 101 这本书。迄今为止，我一直在 ember-cli 网站 here 上使用升级工作流程。。在终端中使用 ember-cli 帮助时，我
ember.js - Ember 与 ember-data 模型的集成测试
如何测试我的组件，将 ember-data 模型作为 props 传递给它？例如: {{#queue/review/moderatable-text model=activity property=
ember.js - Ember 对象和 Ember Data 之间的区别
Ember 对象和 Ember Data 中的对象有什么区别？我知道当服务器上有一些数据时我应该使用 Ember Data 模型，但是我应该何时何地使用它们中的任何一个？最佳答案注意:这很长，有偏
ember.js - 如何从 ember-CLI 判断 ember.js 和 ember-data 版本？
执行ember -v仅显示ember cli版本。如何查看 ember.js 版本和 ember 数据版本？最佳答案 ember.js 和 ember-data 的版本由应用的依赖项决定。 Bow
ember.js - 如何在 ember 运行循环中正确执行 Ember.RSVP.all
我正在尝试在 Ember.RSVP.all 内执行 promise App.Foo = Ember.Object.create({ bar: function() { var
ember.js - Ember JS 访问 ember 对象属性的首选方式
访问 ember 对象属性的首选方法是什么？我经常看到 .get() 方法被使用，但想知道为什么人们不只是使用点表示法。例如在 Advice in the Use of Ember Trek 先生写道
ember.js - Ember 将服务注入(inject) Ember 实用程序
我知道 Ember 有一个记录器，但我想创建自己的用于学习目的。我有一个名为 logger 的服务，我希望能够在任何地方使用这个服务。将此服务注入(inject)到组件、 Controller 等中没
ember.js - ember-cli 卡在 ember 服务器命令上
我刚刚关注了 ember-cli 主页上的“入门”帖子。我安装了 ember 0.1.2、bower、phantomjs 等。但是，我创建了我的应用程序，当我运行“ember server”时，它

首页

博学

6Ren·AI

商城

javascript - 如何处理 ember.js 中的投票？