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

{{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}}

我遇到的问题是,我不知道如何在计算的属性formattedWeekdayfilteredHours中访问工作日。

我想要的是这样的:

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/

10-11 11:10