我已经制作了一个组件,用于显示公司或员工的营业时间的营业时间小部件。{{hours-widget hours=businessHours}}
businessHours
是Company和Employee模型上的Array属性,每个工作日可能有多个打开/关闭时间。[ { "wday": 0, "open": "09:00", "closed": "12:00" }, { "wday": 0, "open": "13:00", "closed": "20:00" }, { "wday": 4, "open": "09:00", "closed": "17:00" }, { "wday": 5, "open": "09:00", "closed": "17:00" }]
我要在组件模板中执行的操作是这样的:{{#each wday in weekDays}} <div class="weekday-row"> <h3>{{formattedWeekday}}</h3> {{#each hour in filteredHours}} <div class="time"> open: {{hour.open}} closed: {{hour.closed}} {{/each}} </div>{{/each}}
我遇到的问题是,我不知道如何在计算的属性formattedWeekday
和filteredHours
中访问工作日。
我想要的是这样的: formattedWeekday: function() { moment.weekdays(@get('wday')) }.property('wday')
一个属性,仅返回当前工作日的条目。 filteredHours: function() { @get('hours').filter(function(item) { item.wday == @get('wday') }) }.property('hours', 'wday')
谢谢您的帮助!
最佳答案
主要问题是您提供的数据格式不正确。它应该具有像在对象中一样的嵌套子代,您可以使用通常的余烬数据获得该子代。我创建了一些丑陋的解决方法,请检查此http://jsbin.com/xanelebago/1/
App.HoursWidgetComponent = Ember.Component.extend({
dates: function() {
hours = this.get('hours');
wdays = hours.map(function(item) {
return item.wday;
}).uniq();
wdays = wdays.map(function(wday) {
items = hours.filterProperty('wday', wday).map(function(item) {
return {
open: item.open,
closed: item.closed
};
});
return {
wday: moment.weekdays(wday),
hours: items
};
});
return wdays;
}.property('hours')
});
<script type="text/x-handlebars">
{{hours-widget hours=businessHoures}}
</script>
<script type="text/x-handlebars" data-template-name="components/hours-widget">
{{#each dates}}
<h2>{{wday}}</h2>
Hours:
<ul>
{{#each hours}}
<li>{{open}} - {{closed}}</li>
{{/each}}
</ul>
{{/each}}
</script>
我希望这会满足您的要求。
无论如何,如果您不能更改数据格式,我建议您为每个循环创建对象控制器,并使用
render
帮助器而不是component
。关于javascript - ember.js访问计算属性中的每个上下文,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26852620/