0

ネストされたルートを持つjsfiddleがあり、 1 つの動的ルートtimeSlotを別の動的ルート予定内にネストしています。予定テンプレート内に#link-to 'timeSlot' があります。そのリンクをクリックすると、timeSlot テンプレートがレンダリングされず、コンソールに次のように表示されます。

 This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.

これがルーターです。timeSlot ルートを動的ルートから通常のルートに変更した場合、つまり this.resource('timeSlot')をリンクするものに変更した場合、エラーはなくなり、テンプレートが表示されることに注意してください。ユーザーがカレンダーからクリックして渡された日付を受け入れるため、ルートは動的である必要があります。

これは小さな jsfiddle であり、jsfiddleのコードの 95% がこの質問に貼り付けられています。

App.Router.map(function(){
  this.resource('appointments', {path: "/"}, function(){ 
    this.resource('appointment', {path: "/:appointment_id"}, function(){
       this.resource('timeSlot', {path: '/:day'});                       
    });     
  });   
});

待ち合わせルート

App.AppointmentRoute = Ember.Route.extend({
   model: function(params){ 
   },

   setupController: function(controller, model){
    this._super(controller, model);
    controller.set('content', model);
   }
 });

TimeSlot ルート

App.TimeSlotRoute = Ember.Route.extend({
  model: function(params){   
  },

  setupController: function(controller, model) {
   this._super(controller, model);
   controller.set('content', model);       
  },

  serialize: function(dateText) {
    /*
   return { 
      day: //this.controllerFor('timeSlot').today.pushObject(dateText)};
       */
  } 
 });

予定のテンプレート

<script type="text/x-handlebars" data-template-name="appointment">
   <br/>
   {{#link-to 'timeSlot' [2013-07-18]}}click timeSlot{{/link-to}}

    {{outlet}}
 </script>

タイムスロット テンプレート

<script type="text/x-handlebars" data-template-name="timeSlot">
<h3> from timeslot template</h3>


{{outlet}}
</script>

アップデート

このルートの場合: this.resource('timeSlot', {path: ':appointment_id/:day'}); この jsfiddle の {{#link-to 'timeSlot' id=this day=['today'] }}click timeSlot {{/link-to}}を 介して、各動的セグメントの値をリンク先に明示的に渡します。リンクにカーソルを合わせると、 「#/2/dateText」が表示されるようになりました。ここで、各スラッシュ セグメントは、動的セグメントの値となります。ダイナミック セグメントの値を渡す前に、リンクにカーソルを合わせたときに表示されたのは、ダイナミック セグメントが選択されていないことを示す/#だけでした。

それでもまだ機能していません。リンク先に渡された値ではなく、serialize メソッドに渡されたハードコーディングされた値を使用しているためです。

更新 2

#linkTo はシリアル化されたメソッドを呼び出していないようですが、このバージョンは機能しています。 http://jsfiddle.net/GQdbD/5/

4

1 に答える 1

1

modelすべてのフックが空なので、何をしようとしているのかわかりにくいです。(あなたのアプリでは実際に空ですか?) 一般に、link-to、transitionTo、またはtransitionToRouteEmber を呼び出す場合、ライブ モデルを渡すことを期待します。このような場合、modelルートのフックはスキップされ、代わりに渡されたモデルlink-toが使用されます。

于 2013-10-19T22:17:08.003 に答える