Ember.js - 子嵌套视图的控制器答案

【问题标题】：Ember.js - child nested views' controllerEmber.js - 子嵌套视图的控制器
【发布时间】：2013-02-23 00:24:31
【问题描述】：

我正在使用 Ember 构建一个简单的日历应用程序。我的观点是这样嵌套的：

<script type="text/x-handlebars" data-template-name="calendar">
    {{content.monthAsString}}
    {{#each day in content.days}}
       {{view App.DayView contentBinding="day"}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name'="calendarDay">
    {{content.date}}
</script>

我的 JS 代码：

App.CalendarController = Ember.ObjectController.extend({
    content:App.Calendar.create(...);
    oneDayHover:function(day){

    }
});
App.CalendarView = Ember.View.extend({
    templateName:"calendar"
});

App.CalendarDayController = Ember.ObjectController.extend({
    dayHOver:function(){
        //???? HOW TO ACCESS CalendarController?????
    }
});
App.CalendarDayView = Ember.View.extend({
    templateName:"calendarDay",
    init:function(){
        this._super();
        this.set('controller', App.CalendarDayController.create());
    },
    mouseEnter:function(){
        this.get('controller').dayHover();
    }
});

问题 1：难道没有比重写视图的 init 方法来设置它的控制器更好的解决方案吗？

问题 2：如何从 CalendarDayController 访问 CalendarController 的 oneDayHover？

提前感谢您的帮助

更新 1： 我应该指出，这些控制器存在于相同的状态。 mouseenter 的目的是在 CalendarDayView 顶部显示一个弹出窗口，其中包含额外的信息。

【问题讨论】：

标签： view controller ember.js

【解决方案1】：

1 - 不要手动将控制器分配给视图。让 Ember 完成繁重的工作！查看 Embers Router API / 如何定义路由。路由将连接控制器和视图并渲染它们 (Doc)。

2 -如果您遵循第 1 点，您的其他问题将通过 Embers 依赖注入方式变得容易：

App.CalendarDayController = Ember.ObjectController.extend({
    needs : ["calendar"],
    dayHOver:function(){
        //Access the single instance of CalendarController
        var calendarController = this.get("controllers.calendar");
    }
});

针对评论进行更新：

CalendarRoute 是隐式创建的。因此，您需要做的就是修改您的模板，我猜：

<script type="text/x-handlebars" data-template-name="calendar">
    {{content.monthAsString}}
    {{#each day in content.days}}
       {{control "calendarDay" day}}
    {{/each}}
</script>

如您所见，我建议使用 {{control}} 助手。上面的代码基本上说的是：

“亲爱的 Ember，请使用名称 'calendarDay' 进行查找 App.CalendarView 和 App.CalendarDayController 并使用它们进行渲染对象日”

此外，您必须告诉 ember，它不应该将控制器用作单例（这是默认行为）：

App.register('controller:calendarDay', App.CalendarDayController, {singleton: false });

注意：我自己还没有使用过控制助手，但它应该是这样工作的。

【讨论】：

感谢您的快速反馈，但我不确定我是否需要路由，因为控制器处于相同状态。我应该更新帖子并添加此信息。有没有办法声明适用于这种情况的路线？
您好 mavilein，再次感谢您的更新。我尝试了控制助手。这可能是解决方案，但现在所有 calendarDayView 都链接到同一个说法。这就像 ember 实例化 calendarDayController 的一个实例并在必要时重用它......你知道解决这个问题的技巧吗？
奇怪。然后我还没有完全理解这个助手的目的。这是 Github 项目上的一个问题：github.com/emberjs/ember.js/issues/1990。他们建议使这个特定的控制器非单例，例如：Reader = Ember.Application.create({}); Reader.register('controller:index_image', Reader.IndexImageController, {singleton: false });
在您的情况下，它必须是：App = Ember.Applicatio.create(); App.register('controller:calendarDay', App.CalendarDayController, {singleton: false });
嗨，是的，我尝试了寄存器并且它有效...再次感谢...也许您应该在解决方案中添加这个技巧 ;-)