Question

我需要一些针对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出口的内容，我在哪里呈现并插入该内容（因为没有涉及路由）？我可以在控制器中渲染吗？我是否必须设置自定义视图容器以及如何以及在何处呈现？

任何暗示都会受到赞赏。

Answer 1

不确定这是不是最好的方法，但我正在玩这个并让它像这样工作：

Full Source | Run

<强>的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>

我不确定这个解决方案，因为它使开发人员负责管理何时渲染或不渲染某个模板或视图;根据复杂程度，更容易犯错并在当时留下多个视图显示，甚至显示错误的视图，但这就是我现在所获得的。

ember.js：我只能在路线上渲染吗？

1 个答案: