ember.js - 使用可選參數和默認模型定義路徑

Question

我想在emberjs中定義一個路由，它有一個可選參數，例如：

/video和/video/123

如果沒有提供參數，我想使用默認的模型/夾具。 如果提供了參數，那么我想顯然使用參數查找模型。

如果我然后去不同的路線，並返回沒有參數的路線，我想使用以前加載的模型。

例如：

startup app

/video - 顯示我的默認/燈具模型

/video/123 - 顯示模型123

/another-route - 顯示新路線

/video - 顯示模型123

這可能嗎？

Answer 1

我最終使用了不同的解決方案：

  this.resource('video', function() {
    this.route('index', {path: '/'});
    this.route('item', {path: ':id'});
  });

這些路線支持：

/video - 顯示我的默認/燈具模型

/video/123 - 顯示模型123

當用戶訪問/video ，VideoIndexRoute必須重定向到沒有任何id的VideoItemRoute。

var VideoIndexRoute = Em.Route.extend({

  afterModel: function() {

    // this is the tricky part
    this.replaceWith('video.item', '');

  }

});

現在，VideoItemRoute必須檢查是否有任何關聯的模型，當它丟失時，它應該使用默認固定裝置或新固定裝置。

var VideoItemRoute = Em.Route.extend({

  model: function(param) {
    if (param.id) {
      return this.store.find('video', param.id);
    }
  },

  setupController: function (controller, model) {
    if (!model) {
      model = this.store.createRecord('video',{
        name: 'default Name'
      });
      // or use fixture...
    }
    this._super(controller, model);

  }

});

Answer 2

有一種干凈的方法可以做到這一點，雖然它有點“棘手”。 我們的想法是使用嵌套路由來保存id，但不渲染它，而是讓父路由負責使用渲染助手來渲染它。 當你這樣做時，所有邏輯都可以存在於VideoChoiceController中，它將用於顯示默認視頻或特定視頻。 這樣做的時候，沒有必要明確地“記住”最后一個視頻，路由引擎代表的狀態機為你做了。

App.Router.map(function) {
  this.resource('video', function(){
    this.route('choice', {path: ':video_id'});
  });
});

App.VideoRoute = Ember.Route.extend({
  model: function(params) {
    return App.get('defaultVideo');
  },

  setupController: function(controller, model) {
    var video_choice = this.controllerFor('video.choice')

    // this is necessary if you want, for example,
    // to display the name or a link to the default video
    // when a specific video is being displayed
    controller.set('model', model);

    if(Ember.isEmpty(video_choice.get('model'))){
      video_choice.set('model', model);
    }
  }
});

App.VideoChoiceRoute = Ember.Route.extend({
  model: function(params) {
    return this.get('store').find('video', params.video_id);
  },

  renderTemplate: function() {
    // if you don't override renderTemplate to do nothing, 
    // everything will still work but you will get an assertion
    // error that render should only be used once with a
    // singleton controller
  }
});



<script type="text/x-handlebars">
  <div>
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name='video'>
  <div> attrributes here always refer to the default video: {{name}} </div>
  {{render "video.choice"}}
</script>

<script type="text/x-handlebars" data-template-name='video'>
  <div> 
    attrributes here always refer to specific or last video, 
    or default if a specific video has never been loaded: {{name}}
  </div>
</script>

Answer 3

當然，你必須做一些有點時髦的事情，比如將最后一個視頻存儲在某個全局變量中，但這取決於你。

http://emberjs.jsbin.com/uhoQozu/1/edit

http://emberjs.jsbin.com/uhoQozu/1#/video

http://emberjs.jsbin.com/uhoQozu/1#/video/32

App.Router.map(function() {
  this.resource('videoModel', {path:'/video/:video_id'});
  this.resource('video');  // this resource can be accessed at /video
});