我正在使用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),然后再次循环以为我的日子并打印它们

我的想法是在控制器中执行日期之前先在模板中循环,然后在控制器中执行天,但是[当然,我需要speficy不是默认的cal控制器,而是days控制器,这就是为什么我在webCal.DaysController中执行了几天
但它抱怨不是数组...

错误:

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


为什么会这样呢?
以及为什么我说控制器中只有几天没有抱怨不是阵列控制器?

最佳答案

我不确定您拥有的数据结构,对于您要在模板中尝试做的事情,几周将需要成为包含几天数组的对象。

{{#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:未经测试

关于javascript - 模板的 Ember 调用 Controller ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26562252/

10-12 12:38
查看更多