EmberJS：具有动态段（路由器）的ArrayController，但不是Store

Question

i was wondering how I could build a "simple" app for:

/photos/ (shows all photos – via ArrayController but without a remote service)
/photos/1  ... /photos/2  (shows one photo)

Can anyone offer a best practice?

Answer 1

You have to define a route that matches the url you want:

App.Router.map(function() {
    // this will give you ~/#/photos
    this.route('photos') 
    // this will give you ~/#/photos/1 (or whatever number)   
    this.route('photo', { path: '/photos/:photo_id' }); 
});

Here's a sample: http://jsfiddle.net/schawaska/AabL8/

If you want to do nested views, like displaying a list of thumbs and when clicking the thumb you see the picture in its actual size underneath the list, then you'll have to do it slightly different by using route resources, nested like this:

App.Router.map(function() {    
    this.resrouce('photos', function() {
        this.route('photo', { path: '/:photo_id' });    
    });
});

If you do it this way, you'll have to add an {{outlet}} in the "photos" template and add Photos in the name of the classes that is responsible for a single photo object

• PhotoRoute becomes PhotosPhotoRoute
• data-template-name="photo" becomes data-template-name="photos/photo"

Here's a sample: http://jsfiddle.net/schawaska/JfRbf/