Question

我目前很难找到一个嵌套的路由，其中一个路径元素是动态的。这就是我想要实现的场景：

该页面包含项目的描述。在页面内是一个选项卡菜单，用于选择不同的视图。这也应反映在URL中。所以我希望有不同的网址：

url#/project1/info
url#/project1/status
url#/project1/...

为了不重复:project参数，我添加了一个不是叶子但只负责项目本身的序列化/反序列化的嵌套项目路由。只要我使用初始项目，一切正常。但它可能发生，我想从一个项目链接到另一个项目。这意味着URL应该从url#/project1/info -> url#/project2/info更改，因此视图也应该更改以显示有关project2的信息。

听起来很简单。但是，当我使用动作帮助器

链接到project2时，不会调用项目路径的反序列化方法

<a {{action changeProject context="App.project2" href=true}}>Go to project 2</a>

我想这是因为我已经处于信息状态。但是，我如何传播上下文更改？您可以在小提琴中找到的简化案例http://jsfiddle.net/jocsch/HYbZj/30/或直接查看http://jsfiddle.net/jocsch/HYbZj/30/show/#/project1/info

Router: Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        changeProject: Em.State.transitionTo('project.info'),                 
        index: Ember.Route.extend({
          route: '/',
         }),
         project: Ember.Route.extend({
           route: '/:project', 
           deserialize: function(router, params) {
              var proj = App.get(params['project']);
              router.get("applicationController").set("content", proj);
              return proj;
           },
           serialize: function(router, context) {
               return {project: context.id};
           },
           index: Ember.Route.extend({
              route: '/',
              redirectsTo: 'info'   
            }),                                    
            info: Ember.Route.extend({
              route: '/info',
              connectOutlets: function(router) {
                var ctrl = router.get('applicationController');
                ctrl.connectOutlet('project', ctrl.get('content'));
             }
         })
      })
   })
})

Answer 1

您不需要任何自定义序列化/反序列化。

代码中一个重要的缺失是在changeProject处理程序中传递上下文。

我会把整个事情写成如下：

<强> JS

App = Ember.Application.create();

App.Project = DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string')
});

App.Project.FIXTURES = [{
    id: '36',
    name: 'First project',
    description: 'My very first project'
}, {
    id: '42',
    name: 'Another project',
    description: 'My other favorite project'
}];

App.store = DS.Store.create({
    adapter: DS.fixtureAdapter,
    revision: 4
});


App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'app-view'
})

App.ProjectsController = Ember.ArrayController.extend();
App.ProjectsView = Ember.View.extend({
    templateName: 'projects-view'
})

App.ProjectController = Ember.ObjectController.extend();
App.ProjectView = Ember.View.extend({
    templateName: 'project-view'
})

App.InfoController = Ember.ObjectController.extend();
App.InfoView = Ember.View.extend({
    templateName: 'info-view'
})

App.Router = Ember.Router.extend({
    enableLogging: true,

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/'
        }),

        showProjects: function(router) {
            router.transitionTo('projects.index');
        }, 

        projects: Ember.Route.extend({
            route: 'projects',

            connectOutlets: function(router) {
                var applicationController = router.get('applicationController');
                applicationController.connectOutlet({
                    outletName: 'projectsList',
                    name: 'projects',
                    context: App.Project.find()
                });
            },

            index: Ember.Route.extend({
                route: '/'
            }),

            showProject: function(router, event) {
                var project = event.context;
                router.transitionTo('project.info', project);
            },

            project: Ember.Route.extend({
                route: '/:project_id',
                modelClass: 'App.Project',

                connectOutlets: function(router, project) {
                    var applicationController = router.get('applicationController');
                    applicationController.connectOutlet('project', project);
                },

                info: Ember.Route.extend({
                    route: 'info',

                    connectOutlets: function(router) {
                        var projectController = router.get('projectController'),
                            project = projectController.get('content');
                        projectController.connectOutlet('info', project);
                    }
                })
            })
        })
    })
});

App.initialize();

<强>车把

<script type="text/x-handlebars" data-template-name='app-view'>
    <h1>Welcome to projects app!</h1>
    <a {{action showProjects}}>Projects home</a>
    <hr/>
    {{outlet projectsList}}
    <hr/>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name='projects-view'>
    {{controller.length}} projects:
    <ul>
    {{#each project in controller}}
        <li>
            <a {{action showProject context="project"}}>{{project.name}}</a>
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name='project-view'>
    <h2>Showing project <i>{{name}}</i></h2>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name='info-view'>
    {{description}}
</script>

JSFiddle @ http://jsfiddle.net/MikeAski/fRea6/

如何路由到相同的嵌套状态但具有不同的上下文？

1 个答案: