我正在使用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/