2013-04-09 3 views
2

Я пытаюсь обернуть голову вокруг объекта model или маршрута против свойства content контроллера. Если вы установили свойство model в маршрут, это автоматически устанавливает его в свойство content в сгенерированном контроллере.Ember.js Свойства маршрутизатора/контроллера

Кроме того, я думаю, что свойство контроллера content позволяет вам получить доступ к атрибутам этого объекта в шаблоне, это правда?

Я прочитал документы и все еще испытываю трудности с переработкой некоторых из этих соглашений.

+2

Вы видели какие-либо из ознакомительных сцен, которые показывают, как использовать маршруты/представления/контроллеры/модели?Я сделал один месяц назад, который охватывает основы за 36 минут http://toranbillups.com/blog/archive/2013/03/02/emberjs-rc1-introduction-screencast/ –

+0

Я этого не видел. Я смотрел этот (http://www.youtube.com/watch?v=7O9X5oeAJm4), и это действительно помогло мне понять общую структуру вещей. Я проверю это. Благодаря! – brandonhilkert

ответ

7

Как ответ here, Ember.Route имеет функцию model, которая позволяет вам установить объект или коллекцию объектов в качестве модели этого маршрута. Маршруты, имеющие отношение к одному объекту, должны иметь контроллер, который расширяет Ember.ObjectController, в то время как маршруты, связанные с коллекцией объектов, должны иметь контроллер, который расширяет Ember.ArrayController. Впоследствии в рабочем процессе Route данные, поступающие с крюка model, устанавливаются в свойство content контроллера с помощью крюка setupController.

Маршруты имеют собственный рабочий процесс для настройки своих контроллеров, поэтому по умолчанию этот метод будет вызываться и заполнять контент с помощью модели. Рассмотрим следующее:

fiddle

App.Email = DS.Model.extend({ 
    address: DS.attr('string'), 
    isActive: DS.attr('boolean') 
}); 

App.Router.map(function() { 
    this.resource('emails', function() { 
     this.route('email', {path: ':email_id'}); 
    }); 
}); 

App.EmailsRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Email.find(); 
    } 
}); 
App.EmailRoute = Ember.Route.extend({ 
    model: function(params) { 
     return App.Email.find(params.email_id); 
    } 
}); 

App.EmailsController = Ember.ArrayController.extend(); 
App.EmailController = Ember.ObjectController.extend(); 

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

App.EmailsRoute = Ember.Route.extend({ 
    ... 
    setupController: function(controller, model) { 
     controller.set('content', model); 
    } 
    ... 
}); 

Есть случаи (см вопрос/ответ, связанный выше), в котором вы, возможно, потребуется/хотите переопределить эти методы, чтобы сделать что-то другое, чем функциональность по умолчанию, например:

fiddle

App.EmailsRoute = Ember.Route.extend({ 
    model: function(params) { 
     return [{id: 1, address: '[email protected]'}]; 
    }, 
    setupController: function(controller, model) { 
     // here, controller is whatever controller this route needs 
     // by conventions, it knows it should be EmailsController 
     // of the type ArrayController 
     // model is whatever was returned by the model function above 

     // the content is a "bag" which can be filled with a model or any 
     // other object you need. Just keep in mind your view layer will 
     // be referring to this object later on 
     controller.set('content', model); 

     // you can set other properties of the controller here too 
     controller.set('applyFilter', true); 
    } 
}); 

Теперь шаблоны будут иметь возможность получить доступ к данным в контроллере. Пример ниже выполняет итерацию через набор объектов (App.Email) в EmailsController. Любой публичный атрибут в этой коллекции или его дочерние объекты доступны здесь, один пример {{email.address}}:

<script type="text/x-handlebars" data-template-name="emails"> 
    <ul> 
    {{#each email in controller}} 
     <li> 
      {{#linkTo emails.email email}} 
       {{email.address}} 
      {{/linkTo}} 
     </li>  
    {{/each}} 
    </ul> 
    {{outlet}} 
</script> 

Обратите внимание, что шаблон не идет непосредственно к модели, а к content, который был назначен с данными от модели. Как я уже сказал, вы можете спрятать любой объект в контенте или модели по маршрутам, так что вы не привязаны к использованию DS.Model, а архитектура сильно связана.

Если эта модель, а не тип App.Email, имела другой тип с различными атрибутами, она также была бы доступна здесь, с ограничениями tho. Если атрибутом модели является коллекция, к ней нельзя получить доступ через индекс (например, {{email.messages[0].body}} не будет работать). Лучший способ действий в этом случае - вычисленное свойство в контроллере, которое даст вам прямой доступ к первому элементу коллекции сообщений электронной почты, если бы у него был один.

+1

Это лучший ответ, который я видел! Большое спасибо за то, что нашли время, чтобы объяснить. – brandonhilkert

+0

Ваш ответ объясняет это намного лучше, чем руководства – ahnbizcad

Смежные вопросы