Как использовать модель приложения внутри частичного маршрута?

Question

Я думаю, что это должно быть очень простое решение, я просто не могу понять это. У меня есть эта модель в моем ApplicationRoute:

App.ApplicationRoute = Ember.Route.extend({ 
    model: function() { 
    return { 
     sideNav: data.side, 
     breadcrumbs: Util.breadcrumbs() 
    } 
    } 
}); 

шаблон приложения:

<script type="text/x-handlebars" data-template-name="application"> 

    {{outlet}} 

</script> 

Обзор шаблона:

<script type="text/x-handlebars" data-template-name="overview"> 

    {{partial side}} 

</script> 

_side парциальное:

<script type="text/x-handlebars" id="_side"> 

    {{#each model.side}} 

     <i {{bindAttr class="iconClass"}}></i><p>{{label}}</p> 

    {{/each}} 

</script> 

Когда я л oad мой обзорный маршрут, материал там загружается, но модель приложения не применяется к частичной части, как хотелось бы ... возможно, лучший способ сделать это. Благодаря!

Answer 1

Похоже, у вас есть две проблемы:

1. Вы связывания side вместо sideNav внутри вашей частичной.
2. Вы пытаетесь получить доступ к модели ApplicationRoute внутри из overview шаблона (который предположительно имеет свой собственный маршрут и контроллер)

Partials не меняет контекст, поэтому они не добавляют никакой сложности на их. Например, если мы ограничимся application шаблона, следующие будут работать:

App.ApplicationRoute = Ember.Route.extend({ 
    model: function() { 
     return { 
      foo: 'bar' 
     }; 
    } 
}); 

<script type="text/x-handlebars" data-template-name="application"> 
    {{partial partial}} 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="_partial"> 
    {{foo}} 
</script> 

Однако, если вы хотите получить в application модели внутри вложенного маршрута, вам нужно попросить об этом. Например, внутри (по умолчанию) index маршрут, можно добавить следующее:

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
     return this.modelFor('application'); 
    } 
}); 

<script type="text/x-handlebars" data-template-name="index"> 
    {{partial partial}} 
</script> 

You can see both examples in this jsfiddle.