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）然后循环再次考虑我的日子并打印它们

我的想法是在控制器中进行日期之前循环模板，然后在控制器中进行数天但是[当然我需要speficy并不是默认的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：未经测试

ember从模板调用控制器

1 个答案: