在 Ember.js 中显示项目数

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

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

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

我对你提供的代码做了一些调整，让它按照我认为你期望的方式工作。我将尝试解释我认为您可能被发送到与您的应用程序相关的循环的位置。 Ember 肯定需要一些时间来适应。

重要的是，Ember

使用命名约定来帮助您连接和关联路由器，路由，控制器，模板，并帮助您查看代码并了解Ember的期望。余烬还给你免费的东西，是免费的东西。

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

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

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

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

你能使用 Ember 命名约定猜出与note资源关联的控制器和路由的名称吗？我会把它留给家庭作业。现在，当您定义了index模板（就像您一样）时，当 Ember 使用此路由器启动时，它将自动推送到application模板{{outlet}}并渲染。application模板上的注释，如果它所做的基本上是和"出口"来渲染东西，Ember默认情况下会做得很好。

在后台，默认application模板可能如下所示。我只是放置<script>标签以突出显示它是application模板。

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

没有数据模板名称的模板用作应用程序模板。如果您愿意，可以放入data-template-name="application"，但除非您使用构建工具，否则不是必需的。现在回到路由器的东西。

如果您像这样定义路由器，就会发生一些很重要的事情。

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

通过在该资源中添加{path: '/'}，您将覆盖/，这是应用程序的基础 URL。现在，"/"与您免费获得index模板无关，它是note模板。当 Ember 启动时，它会自动将note模板推送到application出口。

继续前进，在你的代码中，你几乎没有其他冲突的东西。请记住，如果向Notes.NotesController索要某些东西，则使用命名约定，默认情况下Ember将查找Notes.NotesRoute和notes模板，请注意复数，但是在您的代码中，您的代码中您有一个note模板。

另一个冲突是与index模板，同样与命名约定有关，Ember将查找{{all}}属性的IndexController，并IndexRoute提供模型。在您的代码中，它在Notes.NotesController.

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

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

很抱歉回答很长，但我希望它能澄清事情

这里是 jsBin。

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

快乐编码！！

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

还有一个错别字：

return notes.get('lenght');

长度

应为长度;

return notes.get('length');

相关内容

最新更新

热门标签：