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

Я повторяю список entries и хотел бы отобразить содержимое каждой записи в списке, но только тогда, когда на маршруте соответствующей записи.

То есть-когда на маршруте /entries/2 

* link to entry 1
* link to entry 2

  content for entry 2

* link to entry 3

К сожалению, я не могу использовать {{outlet}} в цикле {{#each entry}}.

Изначально я пытался установить isActive в true в setupController на маршруте и проверить это в шаблоне, но не похоже, что есть хороший способ удалить этот флаг, когда вы переходите к /entries/3 (deactivate работает только при полном удалении от /entries/:entry_id). Смотрите существует ли противоположность setupController? подробнее об этом.

Как лучше всего сделать это с Эмбер?
2 2
ember.js

2 ответа:

Вы можете использовать an itemController с {{each}} и задать вычисляемое свойство на этом элементе контроллера, который гарантирует, что текущее свойство model равно текущей модели App.EntryRoute.

Таким образом, у вас будет следующая настройка маршрута: 

App.Router.map(function() {
    this.resource('entries', { path: '/'}, function() {
      this.resource('entry', { path: ':entry_id' });
    });
});

Следующий шаблон: 

<script type="text/x-handlebars" id="entries">
  {{#each controller itemController="entryItem"}}
    {{#linkTo "entry" this}}{{name}}{{/linkTo}} <br />
    {{#if isSelected}}
      {{details}} <br /><br />
    {{/if}}
  {{/each}}

Нет то, что вам нужно сделать, это создать контроллер App.EntryItem и добавить вычисляемое свойство isSelected, которое должно возвращать true, если текущая модель маршрута === model

Что-то вроде это: 

App.EntryItemController = Em.ObjectController.extend({
  needs: 'entry',

  isSelected: function() {
    return this.get('controllers.entry.model') === this.get('model');
  }.property('controllers.entry.model')
});

Вот скрипка со всеми вышеперечисленными применениями:

Http://jsfiddle.net/teddyzeenny/T2EyK/1/

4

Я добился решения следующим образом. Пожалуйста, дайте мне знать о любых коротких сообщениях в моем коде. Я устанавливаю свойство Entry model, вызывая маршрут входа, чтобы сделать его видимым.

HTML: 

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

<script type="text/x-handlebars" id="entries">
    {{#each controller }}
        {{#linkTo "entry" this}}{{name}}{{/linkTo}} <br />
        {{#if visi}}
            <p>{{details}}</p>
        {{/if}}
    {{/each}}
</script>

JAVASCRIPT: 

App = Ember.Application.create();

App.Router.map(function(){
    this.resource('entries', { path: '/'}, function() {
        this.resource('entry', { path: 'entry/:entry_id' });
    });
});

App.Entry = Em.Object.extend({
    id: null,
    name: null,
    details: null
});

App.entries =[
    App.Entry.create({
        id: 1,
        name: 'entry 1',
        details: 'details 1'
    }),
    App.Entry.create({
        id: 2,
        name: 'entry 2',
        details: 'details 2'
    }),
    App.Entry.create({
        id: 3,
        name: 'entry 3',
        details: 'details 3'
    })
];

App.EntriesRoute=Ember.Route.extend({

    model:function() {
        return App.entries;
    }
});

App.EntryRoute=Ember.Route.extend({

    model:function(params) { 
        var id=parseInt(params.entry_id);
        return App.entries.findProperty('id',id);
    },

    setupController:function(controller,model){
        App.entries.setEach('visi',false);
        model.set('visi',true);
    }
});

С уважением.

0