ember.js: могу ли я отображать только в пути?

Мне нужен "концептуальный" совет для ember.js.

Я думаю, что понимаю, как все работает для прямых случаев, когда URL-адрес изменяется (вручную или с помощью transitionTo). Маршрут отвечает за загрузку соответствующей модели и рендеринг шаблона в родительский аутлет.

Чего я не понимаю: в некоторых случаях вы хотите изменить состояние приложения, но не хотите (или не можете) изменить URL-адрес.

Допустим, у меня есть шаблон с двумя выходами:

<div id='dashboard'>
  <div id='top'>{{outlet top}}</div>
  <div id='bottom'>{{outlet bottom}}</div>
</div>

top и bottom части приборной панели не зависят друг от друга. Первоначально приложение, вероятно, переходит на маршрут /dashboard, который отображает начальное состояние top и bottom в выходах. Но что происходит потом? Если я хочу изменить содержимое выхода top, где мне отображать и вставлять это содержимое (поскольку маршрут не задействован)? Могу ли я визуализировать в контроллере? Должен ли я настраивать пользовательский контейнер представления и как и где он будет отображаться?

Любой намек будет оценен.


ember.js ember-router
person Andi Schacke    schedule 08.03.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не совсем уверен, что это лучший способ сделать это, но я поиграл и заставил его работать так:

Полный исходный код | Выполнить

JavaScript:

App.DashboardView = Em.View.extend({
    starActive: true,
    userActive: false,
    heartActive: false,
    resetDisplay: function() {
        this.set('starActive', false);
        this.set('userActive', false);
        this.set('heartActive', false);
    },
    star: function() { 
        console.log('star'); 
        this.resetDisplay();
        this.set('starActive', true);
    },
    user: function() {
        console.log('user'); 
        this.resetDisplay();
        this.set('userActive', true);
    },
    heart: function() {
        console.log('heart'); 
        this.resetDisplay();
        this.set('heartActive', true);
    }
});

Рули:

<script type="text/x-handlebars" data-template-name="_navDashboard">
    <ul class="nav-list">
        <li class="nav-header">Actions</li>
        <li>
            <a {{action star target="view"}}><i class="icon-star"></i> One</a>
        </li>

        <li>
            <a {{action user target="view"}}><i class="icon-user"></i> Two</a>
        </li>
        <li>
            <a {{action heart target="view"}}><i class="icon-heart"></i> Three</a>
        </li>
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="dashboard/user">
    <h3>User</h3>
</script>

<script type="text/x-handlebars" data-template-name="dashboard/star">
    <h3>Star</h3>
</script>

<script type="text/x-handlebars" data-template-name="dashboard/heart">
    <h3>Heart</h3>
</script>

<script type="text/x-handlebars" data-template-name="dashboard">
    <div class="row-fluid">
        <h2>Dashboard</h2>
    </div>
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
              {{partial navDashboard}}
            </div>
        </div>
        <div class="span7">
            {{#if view.starActive}}
                {{render "dashboard/star"}}
            {{/if}}
            {{#if view.userActive}}
                {{render "dashboard/user"}}
            {{/if}}
            {{#if view.heartActive}}
                {{render "dashboard/heart"}}
            {{/if}}
        </div>
    </div>
</script>

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

person MilkyWayJoe    schedule 08.03.2013
comment
Я думаю, что это, вероятно, путь. Мой вариант использования немного сложнее, но я постараюсь пойти по этому пути... - person Andi Schacke; 11.03.2013
comment
Кстати: почему вы устанавливаете цель действия для представления? Не было бы более естественным обрабатывать события в контроллере? - person Andi Schacke; 11.03.2013
comment
Извините за поздний ответ. Это действительно зависит. В последнее время я обнаружил, что часто обрабатываю события в маршрутах, поэтому в моих контроллерах есть действия, которые в значительной степени выполняют только this.get('target').send('eventName', this.get('content'));, и я обрабатываю их в маршруте. Как я уже сказал, зависит от того, что вы делаете или пытаетесь сделать. Просто убедитесь, что вы последовательны в любом подходе. - person MilkyWayJoe; 30.03.2013