javascript - ember.js のアイテム数を表示する

Question

私は非常に簡単なことを必要としており、Web で確立されたソリューションを見ると、私のコードが正しいことがわかります。しかし、明らかにそうではありません。アプリにあるメモ (モデル) の数を表示するだけです。

<!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}} にメモの数が表示されないのはなぜですか?

score 0 · Accepted Answer

あなたが提供したコードにいくつかの調整を加えたところ、あなたが期待していたように動作するようになりました。あなたのアプリに関連してループに送られた可能性があると思われる場所を説明しようと思います。Emberは確かに慣れるまでに時間がかかります。

重要なことの 1 つは、Ember が命名規則を使用して、ルーター、ルート、コントローラー、テンプレートを相互に正しく接続して関連付け、コードを見て、Ember が何を期待しているかを知るのに役立つことです。Ember は無料のものも提供します。

したがって、Ember が起動すると、いくつかのデフォルトアセットが無料で取得されます。ApplicationRouteこれらはApplicationController、application明示的に定義していなくても、常に Ember に存在します。ただし、それらを使用する必要がある場合は、それらを定義してコードを追加するだけです。これらに加えて、他のアセットと同様に Ember の上部にあるIndexRoute、IndexControllerおよびテンプレートを取得します。index

アプリapplicationの最上位にあるテンプレートは、すべてのテンプレートの親であると考えてください。無料で入手したテンプレートを含め、他のテンプレートがそこに入れられてレンダリングされindexます。ここからが少し難しいところです。

たとえば、Ember でこのようなルーターを定義するとします。index以前と同じように使用できるテンプレートがあり、というテンプレートもありますnote。

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

noteEmber 命名規則を使用して、リソースに関連付けられたコントローラーとルートの名前を推測できますか? それは宿題にします。テンプレートを定義した場合、Ember がこのルーターで起動するとindex(あなたがそうであったように)、テンプレートは自動的にapplicationテンプレートにプッシュされ、{{outlet}}レンダリングされます。基本的にすべての機能が存在し、何かをレンダリングするための「アウトレット」である場合、テンプレートに関するメモapplicationEmber はデフォルトでそれをうまく実行します。

バックグラウンドでは、デフォルトのapplicationテンプレートは次のようになっている場合があります。テンプレート<script>を強調表示するタグを付けただけです。application

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

data-template-name のないテンプレートは、アプリケーションテンプレートとして使用されます。必要に応じて配置data-template-name="application"できますが、ビルドツールを使用しない限り必要ありません。ルーターの話に戻ります。

このように Router を定義すると、重要なことが起こります。

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

そのリソースを追加することで、アプリケーションのベース URL であるを{path: '/'}オーバーライドします。現在、「/」は、無料で入手したテンプレートに/関連付けられていません。Ember が起動すると、テンプレートが自動的にアウトレットにプッシュされます。indexnotenoteapplication

先に進むと、コードには他にも競合するものがほとんどありませんでした。何かを尋ねる場合、命名規則を覚えておいてください。Ember はデフォルトで aとテンプレートNotes.NotesControllerを探します。複数形に注意してください。ただし、コードにはテンプレートがあります。Notes.NotesRoutenotesnote

もう 1 つの競合は、テンプレートとの競合です。これもまた、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');

score 0 · Accepted Answer

0

テンプレートでは、notes.hbsできるはずです{{length}}。

于 2013-10-30T22:12:53.220 に答える

javascript - ember.js のアイテム数を表示する

2 に答える 2

Related

Reference