Javascript 在ember.js中显示项目数_Javascript_Ember.js_Ember Data

Javascript 在ember.js中显示项目数

javascript ember.js

Javascript 在ember.js中显示项目数,javascript,ember.js,ember-data,Javascript,Ember.js,Ember Data,我需要一个非常简单的东西，在网上看到的解决方案告诉我，我的代码是正确的。但显然不是。我只需要显示我的应用程序中有多少笔记（型号）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Notes and bookmarks </title> <link rel="stylesheet" href="css/style.css"> <

我需要一个非常简单的东西，在网上看到的解决方案告诉我，我的代码是正确的。但显然不是。我只需要显示我的应用程序中有多少笔记（型号）：

<!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.NotesController = Ember.ArrayController.extend ({
    all: function () {
        var notes = this.get('model');
        return notes.get('lenght');
    }.property('model')
});

我认为这是所有的重要代码，使这项工作，但如果你需要其他部分，我会补充。

为什么我在{{all}中看不到我的笔记数

在您的

notes.hbs

模板中，您应该能够执行

{{length}

我对您提供的代码进行了一些调整，并使其按照我认为您期望的方式工作。我将尝试解释我认为您可能被发送到哪里进行循环，因为它与您的应用程序有关。灰烬需要一些时间才能使用

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

因此，当Ember启动时，您可以免费获得一些默认资产，

ApplicationRoute

、

ApplicationController

和

应用程序

模板，即使您从未明确定义它们，它们也始终存在于Ember中。但是，如果需要使用它们，只需定义它们并添加任何代码即可。除此之外，您还可以获得一个

索引路由

，

索引控制器

和

索引

模板，这些模板与其他资产一样位于余烬顶部

请记住

应用程序

模板，它位于应用程序的最高级别，将其视为所有模板的父级。其他模板将放入其中并呈现，包括免费获得的

索引模板。这就是事情变得有点棘手的地方
例如，如果您在Ember中定义这样的路由器。您仍然有索引
模板，可以像以前一样使用，现在还有一个名为注释
的模板
App.Router.map(function() {
    this.resource('note');
});

您能否使用余烬命名约定猜出与注释资源关联的控制器和路由的名称？我把它留作家庭作业用。现在，当Ember启动此路由器时，如果您定义了索引
模板（就像您一样），它将自动推送到应用程序
模板
{outlet}}
，并进行渲染。在应用程序
模板上有一个注释，如果它的所有工作基本上都是完成的，那么“outlet”渲染stuff Ember在默认情况下就可以了
在幕后，默认的应用程序
模板可能看起来像这样。我只是把
标记放在应用程序
模板中突出显示它的属性
<script type="text/x-handlebars">
  {{outlet}}
</script>

通过在该资源中添加{path:'/'}
，您将覆盖应用程序的基于url的/
。现在“/”与免费获得的索引模板不相关，它是注释模板。当Ember启动时，它将自动将注释
模板推入应用程序
出口
接下来，在代码中，您几乎没有其他冲突的东西。如果询问Notes，请记住命名约定。NotesController
默认情况下会查找Notes。NotesRoute
和Notes
模板，请注意复数形式，但在代码中，您的代码有一个note
模板
另一个冲突与索引
模板有关，同样与命名约定有关，Ember将为{all}}
属性和索引路由
查找索引控制器
，以提供模型。在您的代码中，它位于Notes.NotesController
上
最后，请不要忘记您是否正在使用和适配器来定义它：
 Notes.ApplicationAdapter = DS.FixtureAdapter.extend({});

很抱歉回答得太长，但我希望它能澄清问题
这里是jsBin

快乐编码
另外，您可以将{{model.length}}放在模板中，它也可以完成同样的事情。但在余烬中，有几种方法可以做同样的事情
还有一个输入错误：
return notes.get('lenght');

长度应该是长度
return notes.get('length');

哦这太容易了，我为找到一个余烬解决方案而疯狂。谢谢：）真的，我以为你成功了。我搞砸了，让它开始工作了。我可以修改我的答案，如果你想以后我应该保存jsbin和张贴。我读了下面的答案，认为答案已经确定了。
return notes.get('lenght');

return notes.get('length');