Question

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

{{hours-widget hours=businessHours}}

businessHours是公司和员工模型上的一个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')

感谢您的帮助！

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>

我希望这符合您的要求。无论如何，如果您无法更改数据格式，我建议您为每个循环创建对象控制器，并使用render助手而不是component。

ember.js访问computed属性中的每个上下文

1 个答案: