Emberjs Dynamic Route URL取值

上週同事在試emberjs時發現extend原本的route然後去set model時會導致呼叫transitionToRoute失敗，造成URL會變成像http://x.x.x.x/post/undefine/edit 只能使用Model覆寫find method的方式去做。 今天晚上想說有空來試一下，結果一試之下用set model的方法也可以啊XD.

  1. 先在route map裡加上route setting,例如我想要的URL像http://x.x.x.x/post/{dynamic value}/edit

     App.Router.map(function(match) {
     this.resource('post', { path: '/post/:post_id' }, function() {
         this.route('edit');
     });
 }

  2. extend route然後更改model return的值, 傳入參數params裡可以取得你在url裡輸入的dynamic value

     App.PostRoute = Ember.Route.extend({
     setupController: function(controller, model) {
         controller.set('content', model);
     },

     model : function(params){   
         var id = params.post_id;
         post = new App.Post;
         post.id = id;
         var reg = /^[0-9]*$/;
         if (reg.test(id)){
             post.isNumber = true;
             post.sqrt = id * id;
         }
         return post;    
     }   
 });

  3. 別忘記定義你的Post model

     App.Post = Ember.Object.extend({
     id: 0,
     sqrt: 0,
     isNumber: false
 });

  4. 在Post controller加上一個function讓Post的template可以觸發導到sub route也就是{dynamic value}/edit

     App.PostController = Ember.ObjectController.extend({
     goEdit: function() {
         this.transitionToRoute('post.edit');
     }
 });

  5. 最後只要在template裡面觸發goEdit function即可

     Ember.TEMPLATES['post'] = Ember.Handlebars.compile(
 "\
     <p>post id : { {id}} </p>\
     <p>post isNumber : { {isNumber}} </p>\
     { {#if isNumber}}\
         <p>square of id is : { {sqrt}} </p>\
     { {/if}}\
     <a href='' { { action goEdit}}>GoEdit</a>\
 "
 );

另一種方法就是不需要第2步，然後直接在第3步的model裡加上find function. 可以達成一樣的效果

App.Post = Ember.Object.extend({
    id: 0,
    sqrt: 0,
    isNumber: false
});

App.Post.reopenClass({
    find: function (id) {
        var reg = /^[0-9]*$/;
        post = new App.Post;
        post.id = id;
        if (reg.test(id)){
            post.isNumber = true;
            post.sqrt = id * id;
        }
        return post;
    }
});
emberjs
Comments

Comments