沒有emberdata的Ember動態細分

Question

我正在努力應對動態路線。 這是我的代碼

        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();

在No route matched the URL 'crisis'錯誤的StaffRoute ，應該在StaffRoute模型中StaffRoute什么？ for localhost/#stuff ，如何正確設置動態段部分？ 我對ember文檔的唯一問題是，所有示例都使用了尚未准備生產的ember數據，並且我不想使用它。

Answer 1

如果沒有ember-data，通常會在路線的model方法內放置帶有jQuery的直接getJSON。 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示例 。

Answer 2

'/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.StuffsRoute ， App.StuffsView和App.StuffsController 。