Динамические сегменты динамиков без emberdata

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

Что я должен поставить в модели StaffRoute, что я перестану получать No route matched the URL 'crisis' ошибки? для localhost/#stuff и как правильно настроить динамическую часть сегмента? Моя единственная проблема с документацией ember заключается в том, что во всех примерах используются данные ember-data, которые не являются готовыми к производству, и я не хочу их использовать.

Answer 1

'/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 и для этого ресурса.

Answer 2

Без данных ember вы обычно ставите прямой getJSON с jQuery внутри метода model на маршруте. Методы model поддерживают обещания, поэтому вы можете повторно использовать обещание jQuery.

Например, учитывая маршрут, чтобы загрузить список изображений для /images/tag маршрута с использованием API Flickr будет,

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, который делает это.