代码之家 › 专栏 › 技术社区 › Toran Billups

如何使用ember.js创建指向具有文本值的路线的动作辅助对象

ember-old-router handlebars.js ember.js

Toran Billups · 技术社区 · 12 年前

我正在使用ember pre 1.0编写一个简单的排序/分页控制器。当用户单击表上的列标题时,我想更改控制器上的排序属性。我有一个简单的操作助手,指向我的routers sortUser方法,但我似乎无法传入路由可以用作参数的原始字符串,如“username”或“id”

而且我的网址似乎坏了(得到这个网址)

http://localhost:8000/#/sort/undefined

而不是

http://localhost:8000/#/sort/username

提前谢谢

<table width="250px">
<thead>
<th><a {{action sortUsers "id" href=true}}>id</th>                                        
<th><a {{action sortUsers "username" href=true}}>username</th>
<th>update</th>
<th>delete</th>
</thead>
<tbody>

这是我的路由器(省去了一些复杂性,但它是一个嵌套的路由)

PersonApp.Router = Ember.Router.create({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      paginateUsers: Ember.Route.transitionTo('paginated'),
      sortUsers: Ember.Route.transitionTo('index.sort.index'),
      connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet('person', router.get('store').findAll(PersonApp.Person));
      },
      index: Ember.Route.extend({
        route: '/'
      }),
      paginated: Ember.Route.extend({
        route: '/page/:page_id',

        connectOutlets: function(router, context) {
          router.get('personController').set('selectedPage', context.page_id);
        },

        exit: function(router) {
          router.get('personController').set('selectedPage', undefined);
        }
      }),
      sort: Ember.Route.extend({
        route: '/sort/:column',

        serialize: function(router, context) {
          if (context) { return { sort: context.sort } }
          return {sort: undefined}
        },

        deserialize: function(router, context) {
          return { sort: context.column }
        },

        connectOutlets: function(router, context) {
          router.set('personController.sortProperties', ['username']);
          router.get('personController').set('selectedPage', 1);
        },

更新

我有一个完整的 jsfiddle 其中的一个现在正在运行(沿边过滤器排序+分页)

1 回复 | 直到 12 年前

Community alpakyol 4 年前

我认为你可能有两个较小的问题导致了你的问题。

sortUsers操作指向排序路由下的索引路由。我在你包含的代码中看不到这样的路线。我只看到排序/:列路由。

昨天,我在制定类似的路线时遇到了问题,最后我制定了以下内容来正确处理“上下文”。我一点也不确定你应该这么做,但这对我来说很有效。
```
sortUsers: function(router, event) {
  // you can now also console.log here as suggested by sly7_7
  router.transitionTo('index.sort', event.context);
},
```
您的序列化/反序列化方法看起来不正确。它们可能很好,但从我的外表来看,它们看起来很破旧。Serialize应该将您所拥有的作为“上下文”,并将其转换为url参数。反序列化应该做相反的事情,并返回与序列化作为输入所得到的完全相同的结果。
```
serialize: function(router, context) {
  return {
    column: context // you are passing a string so let's just put that in the url as is 
  }
},
deserialize: function(router, urlParams) {
  return urlParams.column; // just return the straight string from the url
}
```

我可能遗漏了一些细节,但看起来有一些更改可能会让您的过渡运行起来。

此外,请确保您要求路由器记录它在做什么。。。那么你也可以更好地跟踪你的进度。 启用日志记录:true