Как подключить контроллер ember.js к View

Question

У меня есть следующая структура в моем приложении Ember:

App.Router.map(function() { 
    this.route('shop', { path: '/shop' }); 
}); 

App.ShopRoute = Ember.Route.extend({ 
    model: function() { 
     return $.getJSON("/fruits"); // this returns a json like this: { apples: [...], oranges: [...]} 
    } 
}); 

App.AppleListItemView = Ember.View.extend({ 
    templateName: 'apple-list-item', 
    tagName: 'li', 
    classNames: ['apple'] 
}); 

App.AppleListItemController = Ember.ArrayController.extend({ 
    color: "green", 
}); 

Далее, когда я пытаюсь использовать {{color}} в шаблоне яблочно-элемента списка, он печатает ничего. Как мне это исправить?

Answer 1

Вам нужно беспокоиться о вашем названии. A shop маршрут в вашем маршрутизаторе, ожидает ShopRoute и ShopController, но мы можем оставить это, чтобы ember сгенерировал один для вас. и шаблон shop. Вы должны рассмотреть ваш вариант факультативно расширение вашего шаблона. Эмбер всегда имеет index маршрут таким образом, вам нужен index шаблон:

<script type="text/x-handlebars" data-template-name="index"> 
    {{#link-to 'shop'}}shop!{{/link-to}} 
</script> 

и шаблон магазина с itemController в each добавление контроллера к каждому элементу в списке яблок:

<script type="text/x-handlebars" data-template-name="shop"> 
    SHOP! {{color}} 
    <ul> 
    {{#each apple in model.apples itemController='apple'}} 
     <li class="apple">{{apple.model}} {{apple.color}}</li> 
    {{/each}} 
    </ul> 
</script> 

И тогда ваше приложение будет выглядеть somehting как:

App = Ember.Application.create(); 

App.Router.map(function() { 
    this.route('shop', { path: '/shop' }); 
}); 

ShopRoute с:

App.ShopRoute = Ember.Route.extend({ 
    model: function() { 
     return { apples: [ 'grannysmith', 'pinklady' ], oranges: [ 'clementines' ]}; 
    } 
}); 

AppleController И будет использоваться в качестве itemController:

App.AppleController = Ember.Controller.extend({ 
    color: function() { 
     if (this.get('model') === 'grannysmith') { 
     return 'green'; 
     } 
     return 'purple';           
    }.property('model'), 
}); 

Смотрите эту jsbin.