模板中的 ember 调用控制器

Question

我正在使用 Emberjs，但我仍然无法完全了解如何从模板中绑定控制器。

我有一个模型：date_model.js

WebCalendar.Dates = DS.Model.extend({
    today: DS.attr('date'),
    monthNumber: function(){
        var today =  this.get('today');
        return today.getMonth();
    }.property('today'),
    month: DS.attr('date'),
    year: DS.attr('date'),
    daysName: DS.attr('array'),
    daysInMonth: DS.attr('array'),
    weeks: DS.attr('number')
});

WebCalendar.Dates.FIXTURES = [
    {   
        id: 1,
        today: new Date(), 
        month: moment().format('MMM'),
        year: moment().format('YYYY'),
        daysName: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        daysInMonth: [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ],
        weeks: new Array(6)
    }
];

和两个控制器差不多:) cal_controller.js：

WebCalendar.CalController = Ember.ArrayController.extend({
    itemController: 'days'

});

days_controller.js

WebCalendar.DaysController = Ember.ObjectController.extend({
    getMonthDays: function(){
        var monthNumber = this.get("monthNumber");
        var daysInMonth = this.get("daysInMonth");
        var totDayInMonth = daysInMonth[monthNumber];

        var days = [];
        for( i = 1; i < totDayInMonth; i++){
            days.push(i);
        }
        return days;

    }.property('monthNumber')
});

还有一个模板，cal.hbs：

<table>
        {{#each date in controller}}
            <tr id="year">
                <td>{{date.year}}</td>
            </tr>
            <tr>
                <td id="prev-month"> Prev </td>
                <td id="month">{{date.month}}</td>
                <td id="next-month"> Next </td>
            </tr>

            <tr id="days-of-week">
                {{#each date.daysName}}
                    <td>{{this}}</td>
                {{/each}}
            </tr>

        {{/each}}

    <tbody>



    {{#each date in controller}} 
        {{#each date.weeks}}
            <tr class="days">{{this}}
                {{#each days itemController="days"}}
                    <td>{{days.getMonthDays}} Days</td>
                {{/each}}
            </tr>
        {{/each}}
    {{/each}}

    </tbody>    
</table>

所以我需要遍历我的周模型 (6)，然后再次循环思考我的日子并打印它们

我的想法是先在模板中循环，然后在控制器中执行日期，然后在控制器中执行天数，但是 [当然，我需要指定的不是默认的 cal 控制器而是天数控制器，这就是我在 webCal.DaysController 中执行天数的原因 但它抱怨不是一个数组......

错误：

Assertion failed: The value that #each loops over must be an Array. 
You passed WebCalendar.DaysController 

为什么会这样？ 为什么如果我说只是在控制器中的几天不会抱怨不是数组控制器？？

Answer 1

我不确定您拥有的数据结构，对于您在模板中尝试执行的操作，周需要是包含天数组的对象。

{{#each date in controller}} 
  {{#each date.weeks}}
    <td>{{this}}
      {{#each days itemController='days'}}
          <td>{{days.getMonthDays}} Days</td>
      {{/each}}
    </td>
  {{/each}}
{{/each}}

更新：

可以在DateController 中创建更好的循环结构：

WebCalendar.DateController = Ember.ArrayController.extend({
  formattedWeeks: function() {
    var i;
    var monthNumber = this.get('monthNumber');
    var daysInMonth = this.get('daysInMonth');
    var totDayInMonth = daysInMonth[monthNumber];

    var days = [];
    for (i = 1; i < totDayInMonth; i++) {
      days.push(i);
    }

    var weeks = [];
    var fullWeeks = Math.floor(days.length / 7);

    for (i = 0; i < fullWeeks; i++) {
      weeks.push(days.splice(0, 7));
    }

    weeks.push(days);

    return days;
  }.property('monthNumber', 'daysInMonth')
});

这会给你一个数组，它们有正确的编号，即：

[
   [1,2,3,4,5,6,7],
   [8,9,10,11,12,13,14],
   [15,16,17,18,19,20,21],
   [22,23,24,25,26,27,28],
   [29,30]
]

然后在你的模板中：

{{#each date itemController='date'}} 
  {{#each date.formattedWeeks}}
    <tr>
      {{#each this}}
          <td>{{this}}</td>
      {{/each}}
    </tr>
  {{/each}}
{{/each}}

PD：未经测试