Question

我需要一件非常简单的事情，并在网上查找已建立的解决方案，告诉我我的代码是正确的。但显然不是。我只需要在我的应用中显示我有多少笔记（模型）：

<!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>

我的模特：

    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: '...'
    }
]

我的笔记管理员：

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

我认为这是使这项工作的所有重要代码，但如果你需要其他部分，我会添加。为什么我在{{all}}中看不到我的笔记数量？

Answer 1

在notes.hbs模板中，您应该能够{{length}}。

Answer 2

我对您提供的代码进行了一些调整，并让它以我认为您希望它工作的方式工作。我将尝试解释我认为您可能已经发送了一个循环，因为它与您的应用程序有关。 Ember肯定会得到一些使用。

重要的一点是，Ember使用命名约定来帮助您将路由器，路由，控制器，模板相互正确连接并相互关联，并帮助您查看代码并了解Ember期望的内容。 Ember也给你免费的东西，yaaay免费的东西。

因此，当Ember启动时，您可以免费获得一些默认资产ApplicationRoute，ApplicationController和application模板，即使您从未明确定义它们，这些资源也始终存在于Ember中。但是，如果您需要使用它们，只需定义它们并添加任何代码即可。除此之外，您还可以获得IndexRoute，IndexController和index模板，这些模板与其他资产一样位于Ember顶部。

请记住application模板，它位于应用程序的最高级别，将其视为所有模板的父级。其他模板将被放入并呈现，包括您免费获得的index模板。现在这是事情变得有点棘手的地方。

例如，如果您在Ember中定义这样的路由器。您仍然拥有可以使用的index模板，现在您还拥有一个名为note的模板。

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

您能否使用Ember命名约定猜测与note资源关联的Controller和Route的名称？我将其留给家庭作业。现在当Ember使用此路由器启动时，如果您定义了index模板（就像您一样），它将自动被推送到application模板{{outlet}}并进行渲染。关于application模板的说明，如果它的所有操作基本上都是正确的，那就是＆＃39;出口＆＃39;渲染东西Ember默认会这么做。

在幕后，默认的application模板可能看起来像这样。我只是将<script>标记用于突出显示application模板。

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

没有data-template-name的模板用作应用程序模板。如果您愿意，可以放入data-template-name="application"但除非您使用构建工具，否则无需放入App.Router.map(function() { this.resource('note', { path: '/'}); });。现在回到路由器的东西。

如果你定义一个像这样的路由器，那么实现这一点很重要。

{path: '/'}

通过在该资源中添加/，您将覆盖index，这是您的应用程序的基础网址。现在＆＃39; /＆＃39;与您note模板免费获得的note模板无关。当Ember启动时，它会自动将application模板推入Notes.NotesController插座。

继续前进，在您的代码中，您几乎没有其他相互矛盾的事情。请记住使用命名约定时，如果要求Notes.NotesRoute Ember默认情况下会查找notes和note模板，请注意复数，但在您的代码中您的代码是index 1}}模板。

另一个冲突是使用IndexController模板，再次使用命名约定Ember将查找{{all}}属性IndexRoute和Notes.NotesController来源该模型。在您的代码中，它位于Notes.ApplicationAdapter = DS.FixtureAdapter.extend({});。

最后不要忘记你是否正在使用和适配器来定义它：

return notes.get('lenght');

很抱歉答案很长，但我希望能找到答案

这里是jsBin。

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

快乐编码!!

PS。您可以将{{model.length}}放在模板中，它可以完成同样的事情。但在Ember，有几种方法可以做同样的事情。

还有一个拼写错误：

return notes.get('length');

长度应该是长度;

{{1}}

显示ember.js中的项目数

2 个答案: