0

ユーザーの配列を表示するテーブルを備えたシンプルなWebアプリがあります。このためのhtmlは、ユーザー名/などを示す基本的な表です。

jsfiddleはここにあります（ただし、リンクをクリックしてページをページ付けすると、jsfiddleはページをリロードするように見えます-以下をコピーして貼り付けるときにローカルで取得するものではありません）。ただし、どちらの方法でも、基本的なアプリの動作を示すのに役立ちますhttp://jsfiddle.net/Jmj4F/

<script type="text/x-handlebars" data-template-name="application">
  <div id="main">
    {{ outlet }}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="person">
<table width="250px">                                                                            
<thead>
<th>id</th>
<th>username</th>
<th>update</th>
<th>delete</th>
</thead>
<tbody>
   {{#each person in controller}}
    <tr>
      <td>{{person.id}}</td>
      <td>{{view Ember.TextField valueBinding="person.username"}}</td>
      <td><input type="submit" value="update" {{action updatePerson person}}/></td>
      <td><input type="submit" value="delete" {{action removePerson person}}/></td>
    </tr>
   {{/each}}
</tbody>
</table>
<div id="pages">
  Page.
  <a href="/#/page/2">2</a>
  <a href="/#/page/3">3</a>
</div>
</script>

私のアプリには現在2つのルートがあります。1つはすべてのユーザーにデフォルトのビューをプッシュします。2つ目は、配列をスライスし、ユーザーのサブセットのみを表示する単純なページルートです（基本的なページ付け）

PersonApp = Ember.Application.create({});

PersonApp.ApplicationController = Ember.ObjectController.extend({});

PersonApp.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

PersonApp.PersonView = Ember.View.extend({
  templateName: 'person',
  addPerson: function(event) {
    var username = event.context.username;
    if (username) {
      this.get('controller.target').send('addPerson', username);
      event.context.set('username', '');
    }
  }
});

PersonApp.Person = Ember.Object.extend({
  username: null
});

PersonApp.PersonController = Ember.ArrayController.extend({
  content: [],
  page: function(page) {
    //in a real app use the page # to slice the array
    var newContent = this.content.slice(1,2);
    this.set('content', newContent);
  }
});

PersonApp.Router = Ember.Router.create({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      connectOutlets: function(router) {
        var first = PersonApp.Person.create({ username: "first" });
        var middle = PersonApp.Person.create({ username: "middle" });
        var last = PersonApp.Person.create({ username: "last" });
        var people = [first,middle,last];
        router.get('applicationController').connectOutlet('person', people);
      }
    }),
    page: Ember.Route.extend({
      route: '/page/:number',
      deserialize : function (router, params) {
        var pageNumber = params.number;
        router.get('personController').page(pageNumber);
      }
    })
  })
});

$(function () {
  PersonApp.initialize(PersonApp.Router);
});

現在、2をクリックすると、URLのハッシュが次のように変更されます。

http://localhost:8000/#/page/2

に

http://localhost:8000/#/page/undefined

この例はまだ非常にこんにちは世界なので、ここで改善を受け入れることができます。戻るボタンがサポートされているという理由だけでルーターベースのアプローチを使用したいのですが、それはプラスです

前もって感謝します

アップデート

私はついに完全にページ化された/フィルター/ソート可能なアレイコントローラー（jsfiddle）を手に入れました

4

1 に答える 1

1

シリアル化メソッドを追加する必要があったようです-未定義ではなくページ番号を取得します

serialize: function(router, context) {
        return {
          number: context.get('number')                                                          
        }
      }

これを追加する際の唯一の問題は、コンテキストが定義されていないため、次のエラーが発生することです。このメソッドはどのように見えるべきですか？

Uncaught TypeError：未定義のメソッド'get'を呼び出すことができません

于 2012-09-16T19:55:23.763 に答える