javascript - ember.js 访问计算属性中的每个上下文

Question

我制作了一个组件，用于显示公司或员工的营业时间的营业时间小部件。

{{hours-widget hours=businessHours}}

businessHours是公司和员工模型上的数组属性，每个工作日可能有多个打开/关闭时间。

[
{
"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')


感谢您的帮助!

Answer 1

主要问题是您提供的数据格式不正确。它应该有嵌套的子对象，就像您通常使用 ember 数据获得的对象一样。我创建了一些丑陋的解决方法，请检查此 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>

我希望这能满足您的要求。无论如何，如果您无法更改数据格式，我建议您为每个循环创建对象 Controller 并使用 render helper 而不是 component。