1

我需要一些关于 ember.js 的“概念性”建议。

transitionTo我想我理解当 URL 更改（手动或使用）时，事情是如何处理直接情况的。该路由负责加载相应的模型并将模板渲染到父级的插座中。

我不明白的是：在某些情况下您想更改应用程序的状态但您不想（或不能）更改 URL。

假设我有一个带有两个出口的模板：

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

top和bottom仪表板的一部分是相互独立的。最初，应用程序可能会转换到一个/dashboard路由，该路由呈现出口的初始状态top并bottom进入出口。但那会发生什么呢？如果我想更改top插座的内容，我应该在哪里渲染和插入该内容（因为不涉及路由）？我可以在控制器中渲染吗？我是否必须设置自定义视图容器以及如何以及在何处呈现？

任何提示将不胜感激。

4

1 回答 1

1

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

完整来源| 跑

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>

我不确定这个解决方案，因为它让开发人员负责管理何时渲染或不渲染某个模板或视图；根据复杂性，可能会更容易出错并同时留下多个视图显示，甚至显示错误的视图，但这就是我目前得到的。

于 2013-03-08T16:53:24.350 回答