0

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

<!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}} 中看不到我的笔记数量？

4

2 回答 2

0

我对您提供的代码进行了一些调整，并让它按照我认为您期望的方式工作。我将尝试解释我认为您可能已被发送到与您的应用程序相关的循环。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');
});

你能猜出note使用 Ember 命名约定与资源关联的 Controller 和 Route 的名称吗？我会把它留给家庭作业。现在，当 Ember 使用此路由器启动时，如果您定义了一个index模板（就像您一样），它将自动被推送到application模板中{{outlet}}并呈现。在模板上的注释，application如果它的所有工作基本上都是和“出口”来渲染东西，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: '/'}该资源，您将覆盖/应用程序的基础 url。现在“/”与index您免费获得的模板无关，它是note模板。当 Ember 启动时，它会自动将note模板推入application插座。

继续前进，在您的代码中，您几乎没有其他冲突的东西。请记住命名约定，如果要求Notes.NotesController某些内容，Ember 默认会查找 aNotes.NotesRoute和notes模板，注意复数形式，但在您的代码中，您的代码中有一个note模板。

另一个冲突是模板，同样是命名约定，Ember将index寻找属性并提供模型。在您的代码中，它位于.IndexController{{all}}IndexRouteNotes.NotesController

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

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

对不起，答案很长，但我希望它能解决问题

这里是 jsBin。

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

编码快乐！！

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

还有一个错字：

return notes.get('lenght');

长度应该是长度；

return notes.get('length');
于 2013-10-31T01:25:44.420 回答
0

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

于 2013-10-30T22:12:53.220 回答