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 条路线 - 一条向每个用户推送默认视图。第二个是一个简单的页面路由，它应该对数组进行切片并且只显示一部分用户（基本分页）

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

看起来我只需要添加一个序列化方法 - 现在我得到页面 # 而不是 undefined

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

添加它的唯一问题是上下文未定义，因此出现以下错误。这种方法应该是什么样的？

未捕获的类型错误：无法调用未定义的方法“get”

于 2012-09-16T19:55:23.763 回答