0

私は現在、パス要素の1つが動的であるネストされたルートを機能させるのに苦労しています。それが私が達成したいシナリオです：

このページには、プロジェクトの説明が含まれています。ページ内には、さまざまなビューを選択するためのタブ メニューがあります。URLにも反映されるはずです。だから私は次のような異なる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'));
             }
         })
      })
   })
})
4

1 に答える 1

4

カスタムのシリアライゼーション/デシリアライゼーションは必要ありません。

コードに欠けている重要な要素の 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/

于 2012-07-22T06:08:33.173 に答える