顯示ember.js中的項目數

我需要一件非常簡單的事情，並且在網絡上查看創建的解決方案告訴我我的代碼是正確的。但顯然不是。我只需要顯示我有多少筆記（型號）在我的應用程序：顯示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}}中看不到我的筆記數量？

來源

2013-10-30 Giorgia Sambrotta

在您的notes.hbs模板中，您應該可以執行{{length}}。

來源

2013-10-30 22:12:53 jonnii

哦......這很容易，我瘋了尋找一個燼解決方案。謝謝:) –

我對您提供的代碼進行了一些調整，並按照我認爲您期望的方式運行。我將嘗試解釋我認爲您的應用程序與您的應用程序有關的情況，因此您可能已將其發送給了一個循環。 Ember確實需要一些幫助。

有一件重要的事情是，Ember使用命名約定來幫助您正確連接路由器，路由，控制器和模板，並幫助您查看代碼並瞭解Ember的期望。 Ember也給你免費的東西，免費的東西。

所以，當灰燼啓動後你會得到一些默認的資產免費的ApplicationRoute，ApplicationController和application模板，這些總是出現在灰燼，即使你從來沒有明確定義。但是，如果您需要使用它們，只需定義它們並添加任何代碼即可。除此之外，您還可以獲得IndexRoute，IndexController和index模板，這些模板與其他資產一樣位於Ember頂部。

請記住application模板，它位於應用程序的最高級別，將其視爲所有模板的父級。其他模板將被放入並渲染，包括您免費獲得的index模板。現在這是事情變得棘手的地方。

如果你在Ember中定義了這樣的路由器例如。您仍然可以使用您現在可以使用的index模板，現在您也可以使用名爲note的模板。

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

你猜對使用灰燼的命名約定note資源相關的控制器和路由名稱是什麼？我會留下那個作業。現在，當Ember使用此路由器啓動時，如果您定義了index模板（就像您一樣），它將自動被推入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: '/'}); 
});

通過在你重寫/，這是你的應用程序的基於URL該資源加入{path: '/'}。現在'/'與免費獲得的note模板的index模板無關。當Ember啓動時，它會自動將note模板推入application插座。

在你的代碼中，你幾乎沒有其他的東西是衝突的。記住命名約定，如果要求Notes.NotesController的東西Ember默認會尋找Notes.NotesRoute和notes模板，注意多元化，但在你的代碼中你的代碼你有一個note模板。

的其他衝突與index模板，再次與命名約定灰燼會去尋找IndexController爲{{all}}財產和IndexRoute的供應模式。在你的代碼中的Notes.NotesController。

最後不要忘記，如果你正在使用和適配器來定義它：

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

對不起，長的答案，但我希望它清理東西

這裏jsBin。

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

編碼愉快！

PS。你可以在模板中放置{{model.length}}，它可以完成同樣的事情。但在Ember中有幾種方法可以做同樣的事情。

還有一個錯字：

return notes.get('lenght');

Lenght應的長度;

return notes.get('length');

來源

2013-10-31 01:25:44 elrick

是的謝謝我看到它，並糾正它，但仍然無法正常工作：/ –

真的，我認爲你得到它的工作。我搞砸了，並得到它的工作。我可以修改我的答案，如果你想以後我應該保存jsbin併發布。我讀了下面的答案，並認爲它已經確定。 – elrick

顯示ember.js中的項目數

回答

相關問題