代码之家  ›  专栏  ›  技术社区  ›  Fiftoine

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

  •  1
  • Fiftoine  · 技术社区  · 13 年前

    我正在用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: 我应该指出的是,这些控制器处于相同的状态。鼠标输入的目的是在CalendarDayView顶部显示一个包含额外信息的弹出窗口。

    1 回复  |  直到 13 年前
        1
  •  1
  •   mavilein    13 年前

    1-不要手动将控制器分配给视图。 让Ember来做举重!看看Embers路由器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>
    

    正如你所看到的,我建议使用 {{控制}} 帮手上面的代码基本上是这样说的:

    “亲爱的Ember,请使用‘calendarDay’这个名称查找 App.CalendarView和App.CaleendarDayController,并使用它们进行渲染 目标日期“

    此外,你必须告诉ember,它应该 不将控制器用作单例 (这是一种侮辱行为):

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

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