显示ember.js中的项目数

Question

I need a very easy thing and looking on the web the solutions founded tell me that my code is right. 我需要一件很简单的事情，在网上看，找到的解决方案告诉我我的代码是正确的。 But clearly isn't. 但显然不是。 I just need to display how many notes(models) I have in my app: 我只需要显示我的应用程序中有多少个注释（模型）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Notes and bookmarks </title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<script type="text/x-handlebars" data-template-name="index">  
    <div class="wrap">
      <div class="bar">
        <input type="text" class="search" />
        <div class="bar-buttons">
          <button> NEW </button>
          <button> HOME </button>
        </div>
      </div>
      <aside>
        <h4 class="all-notes">All Notes {{all}}</h4>
          {{#each item in model}}
            <li>
              {{#link-to 'note' item}} {{item.title}} {{/link-to}}
            </li>
          {{/each}}
      </aside>
      {{outlet}}
    </div> 
</script>

 <script type="text/x-handlebars" data-template-name="main"> 
 <section>
 <h2>Hellooo</h2>
 </section>
 </script>


  <script type="text/x-handlebars" data-template-name="note"> 
    <section>
        <div class="note">
            {{#if isEditing}}
              <h2 class="note-title input-title"> {{edit-input-note value=title focus-out="modified" insert-newline="modified"}} </h2>
              <p class="input-body"> {{edit-area-note value=body focus-out="modified" insert-newline="modified"}} </p>
              {{edit-input-note value=url focus-out="modified" insert-newline="modified"}}
            {{else}}
              <h2 {{action "editNote" on="doubleClick"}} class="note-title" > {{title}} </h2>
              <button {{action "removeNote"}} class="delete"> Delete </button>
              <p {{action "editNote" on="doubleClick"}}> {{body}} </p>
              {{input type="text" placeholder="URL:" class="input"  value=url }}
            {{/if}}
        </div>
      </section>
  </script>

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars-1.0.0.js"></script>
  <script src="js/libs/ember-1.1.2.js"></script>
  <script src="js/libs/ember-data.js"></script>

  <script src="js/app.js"></script>
  <script src="js/router.js"></script>
  <script src="js/models/note_model.js"></script>
  <script src="js/controllers/note_controller.js"></script>
  <script src="js/controllers/notes_controller.js"></script>
  <script src="js/views/note_view.js"></script>
</body>
</html>

My model: 我的模特：

    Notes.Note = DS.Model.extend ({
    title: DS.attr('string'),
    body: DS.attr('string'),
    url: DS.attr('string')
});

Notes.Note.FIXTURES = [
    {
        id: 1,
        title: 'hello world',
        body: 'ciao ciao ciao ciao',
        url: ''
    },
    {   
        id: 2,
        title: 'javascript frameworks',
        body: 'Backbone.js, Ember.js, Knockout.js',
        url: '...'

    },
    {
        id: 3,
        title: 'Find a job in Berlin',
        body: 'Monster, beralinstartupjobs.com',
        url: '...'
    }
]

And my notes controller: 和我的笔记控制器：

Notes.NotesController = Ember.ArrayController.extend ({
    all: function () {
        var notes = this.get('model');
        return notes.get('lenght');
    }.property('model')
});

I think that's all the important code for make this work but if you need others part I will add. 我认为这是完成这项工作的所有重要代码，但是如果您需要其他部分，我会添加。 Why i can't see the number of my notes in {{all}} ? 为什么在{{all}}中看不到笔记的数量？

Answer 1

在notes.hbs模板中，您应该可以执行{{length}} 。

Answer 2

I made a few adjustments to the code that you provided and got it to work the way that i think you expected it to work. 我对您提供的代码进行了一些调整，并使其按照我认为您期望的方式工作。 I am going to try to explain where I think you may have been sent for a loop as it relates to your App. 我将尝试解释我认为您可能已被送往哪里，这与您的应用程序有关。 Ember takes some getting use to for sure. 灰烬肯定需要一些使用。

One thing that is important is that Ember uses naming conventions to help you wire up and associate your Router, Routes, Controllers, Templates correctly with each other and also help you to look at code and know what Ember expects. 重要的一件事是Ember使用命名约定来帮助您正确连接并相互关联路由器，路由，控制器，模板，还可以帮助您查看代码并了解Ember的期望。 Ember also gives you free stuff, yaaay for free stuff. 灰烬还给您免费的东西，yaaay免费的东西。

So when Ember boots up you get some default assets for free the ApplicationRoute , ApplicationController , and the application template these are always present in Ember even if you never explicitly define them. 因此，在Ember启动时，即使您从未显式定义它们，它们也总是在Ember中免费提供一些默认资产ApplicationRoute ， ApplicationController和application模板。 However if you need to use them just define them and add whatever code. 但是，如果需要使用它们，只需定义它们并添加任何代码。 In addition to those you get an IndexRoute , IndexController and index template which are present at the top of Ember like those other assets. 除了这些之外，您还可以获得IndexRoute ， IndexController和index模板，它们与其他资产一样位于Ember的顶部。

Remember the application template, which is at the highest level of the app, think of it as the parent of all templates. 请记住，位于application最高级别的application模板将其视为所有模板的父级。 Other templates will be put into it and rendered, including the index template that you got for free. 其他模板将放入其中并呈现，包括您免费获得的index模板。 Now this is where things get a little tricky. 现在，这里变得有些棘手了。

If you define a router like this in Ember for example. 例如，如果您在Ember中定义这样的路由器。 You still have that index template which you can use as you were and you also now have a template called note . 您仍然拥有可以像以前一样使用的index模板，并且现在还有一个名为note的模板。

App.Router.map(function() {
    this.resource('note');
});

Can you guess the names for the Controller and Route associated with the note resource using Ember naming conventions? 您可以使用Ember命名约定猜出与note资源关联的Controller和Route的名称吗？ I'll leave that for homework. 我把它留给家庭作业。 Now when Ember boots with this Router if you defined a index template (just like you were) it will automatically be pushed into the application templates {{outlet}} and rendered. 现在，如果您定义了index模板（就像以前一样），则Ember在此路由器上启动时，它将自动推入application模板{{outlet}}并进行渲染。 A note on the application template if all its doing is basically being and 'outlet' to render stuff Ember will do that just fine by default. 关于application模板的注释，如果它基本上只是在做，默认情况下可以通过“出口”来渲染Ember东西。

Behind the scenes the default application template may look something like this. 在后台，默认的application模板可能看起来像这样。 I just put the <script> tags to highlight its the application template. 我只是放置<script>标记以突出显示其application模板。

<script type="text/x-handlebars">
  {{outlet}}
</script>

The template without a data-template-name is used as the application template. 没有数据模板名称的模板用作应用程序模板。 You can put in data-template-name="application" if you like but its not necessary unless you are using build tools. 如果愿意，可以放入data-template-name="application" ，但除非使用构建工具，否则不必输入。 Now back to the Router stuff. 现在回到路由器的东西。

If you define a Router like this something happens that is important to realize. 如果您这样定义路由器，则发生的事情对于实现很重要。

App.Router.map(function() {
  this.resource('note', { path: '/'});
});

By adding {path: '/'} in that resource you are overriding the / , which is the based url of you application. 通过在资源中添加{path: '/'} ，您将覆盖/ ，这是应用程序的基础URL。 Now '/' is not associated with index template that you got for free its the note template. 现在，“/”没有关联index ，你有免费的模板note模板。 When Ember boots it will automatically push the note template into the application outlet. Ember启动时，它将自动将note模板推入application出口。

Moving along, in your code you had few other things that were also conflicting. 继续前进，在您的代码中，您还有其他一些矛盾之处。 Remember with naming conventions if ask Notes.NotesController for something Ember by default will look for a Notes.NotesRoute and a notes template, attention to the pluralization, but in your code your code you have a note template. 请记住命名约定，如果默认情况下询问Notes.NotesController是否为Ember，它将寻找一个Notes.NotesRoute和一个notes模板，注意复数，但是在您的代码中，您有一个note模板。

The other conflict is with the index template, again with the naming conventions Ember is going to look for the IndexController for the {{all}} property and IndexRoute to the supply the model. 另一个冲突是与index模板有关，再次与命名约定有关，Ember将寻找{{all}}属性的IndexController和提供模型的IndexRoute 。 In your code its on the Notes.NotesController . 在您的代码中，其位于Notes.NotesController 。

And finally dont forget if you are using and adapter to define it: 最后不要忘记您是否正在使用and适配器定义它：

 Notes.ApplicationAdapter = DS.FixtureAdapter.extend({});

Sorry for the long answer but i hope it clear up things 抱歉，答案很长，但我希望它能解决问题

Here the jsBin. 这里是jsBin。

http://emberjs.jsbin.com/UPaYIwO/7/edit http://emberjs.jsbin.com/UPaYIwO/7/edit

Happy Coding!! 快乐编码！

PS. PS。 You could have put {{model.length}} in the template and it would have accomplished the same thing. 您可以将{{model.length}}放在模板中，它会完成同样的事情。 But in Ember there is a few ways to do the same thing. 但是在Ember中，有几种方法可以执行相同的操作。

There is also a typo: 还有一个错字：

return notes.get('lenght');

Lenght should be length; 长度应该是长度；

return notes.get('length');

显示ember.js中的项目数

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-10-30 22:12:53

解决方案2
0 2013-10-31 01:25:44

显示ember.js中的项目数

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-10-30 22:12:53

解决方案2 0 2013-10-31 01:25:44

解决方案1
0 已采纳 2013-10-30 22:12:53

解决方案2
0 2013-10-31 01:25:44