2013-06-23 46 views
1

我正在努力處理動態的細分市場。這裏是我的代碼沒有emberdata的動態細分市場

 App.Router.map(function(){ 
     this.resource('stuff', {path: '/stuff/:stuff_id'}, function() { 
      this.route('make'); 
      this.route('edit'); 
      this.route('delete'); 
      this.route('history'); 
      }); 
     }); 

     App.StuffRoute = Ember.Route.extend({ 
      model: function(param) { 
      }, 
     setupController: function(){ 
      }, 
      renderTemplate: function() { 
      } 
     }); 

     App.StuffView= Ember.View.extend({ 
     defaultTemplate: Ember.Handlebars.compile(stuffTemplate) 
     }); 

     App.StuffController = Ember.Controller.extend(); 

我應該把什麼在StaffRoute,我停止獲取No route matched the URL 'crisis'錯誤的模型?對於localhost/#stuff以及如何正確設置動態段部分?我唯一的問題是,所有的例子都使用了不支持生產的ember-data,我不想使用它。

回答

0

'/stuff/:stuff_id'只匹配/stuff/something而不是'/stuff'

嘗試定義單獨的資源:

App.Router.map(function(){ 
this.resource('stuffs', {path: '/stuff'}); 
this.resource('stuff', {path: '/stuff/:stuff_id'}, function() { 
    // routes ... 
}); 

App.Router.map(function(){ 
this.resource('stuffs', {path: '/stuff'}, function() { 
    this.resource('stuff', {path: '/:stuff_id'}, function() { 
     // routes ... 
    }); 
}); 

,並使用App.StuffsRouteApp.StuffsView和此資源。

1

如果沒有餘燼數據,您通常會在路由上的model方法中直接將getJSON與jQuery放在一起。 model方法支持承諾,所以你可以重用jQuery的承諾。

例如給定加載的圖像的列表使用Flickr的API將是/images/tag路線的路線,

App.Router.map(function() { 
    this.resource('images', { path: '/images/:tag'}); 
}); 

App.ImagesRoute = Ember.Route.extend({ 
    model: function(params) { 
    flickerAPI = 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?'; 
    console.log('ImagesRoute.model', params); 

    return jQuery.getJSON(flickerAPI, { 
     tags: params.tag, 
     tagmode: 'any', 
     format: "json" 
    }) 
    .then(function(data) { 
     console.log('loaded images', data); 
     return data; 
    }) 
    .then(null, function() { console.log('failed to load images'); }); 
    } 
}); 

相應的控制器可以訪問/綁定到該返回的JSON的自動特性。或者你可以別名一些計算屬性。

App.ImagesController = Ember.ObjectController.extend({ 
    images: function() { 
    return this.get('model').items; 
    }.property('controller'), 
    title: function() { 
    return this.get('model').title; 
    }.property('images') 
}); 

然後使用這些屬性通過句柄渲染它。

<script type='text/x-handlebars' data-template-name='images'> 
<h1>{{title}}</h1> 
{{#each image in images}} 
    <img {{bindAttr src='image.media.m'}} /> 
{{/each}} 
</script> 

這是一個jsbin example這樣做。