如何在 EmberJS 模板中访问存储在其他变量中的键中的对象属性的值？

Question

我想按特定顺序遍历对象属性。我已经准备了 jsbin 个用例示例（带有 Ember.js 和 Handlebars）。我找不到使车把模拟

的方法

var months = ['2014-01-01', '2014-02-01', '2014-03-01'];

var datesByMonth = {
  '2014-03-01' : [ // march
    { date: '2014-03-10' },
    { date: '2014-03-20' },
    { date: '2014-03-21' }
  ],
  '2014-01-01' : [ // january
    { date: '2014-01-10' },
    { date: '2014-01-20' },
    { date: '2014-01-21' }
  ],
  '2014-02-01' : [ // february
    { date: '2014-02-10' },
    { date: '2014-02-20' },
    { date: '2014-02-21' }
  ],
};

var monthsCount = months.length;

for(var i = 0; i < monthsCount; ++i) {
  var month = months[i];
  console.log(month);
  
  var dates = datesByMonth[month];
  var datesCount = dates.length;
  
  for(var j = 0; j < datesCount; ++j) {
    var obj = dates[j];
    
    console.log('   ', obj.date);
  }
}

因此，问题是如何访问存储在其他变量中的键中的对象属性的值？

P.S。版本：EmberJS v1.9.1，Handlebars v2.0.0

P.S.S 对不起我的英文

Answer 1

您无法仅通过使用动态键名访问对象的内部属性。您可以做的是将计算的属性 months 操作为 return 包含月份键和日期的对象数组。
这里是a working JS Bin example

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.Object.create({
      '2014-03-01': [ // march
        {
          date: '2014-03-10'
        }, {
          date: '2014-03-20'
        }, {
          date: '2014-03-21'
        }
      ],
      '2014-01-01': [ // january
        {
          date: '2014-01-10'
        }, {
          date: '2014-01-20'
        }, {
          date: '2014-01-21'
        }
      ],
      '2014-02-01': [ // february
        {
          date: '2014-02-10'
        }, {
          date: '2014-02-20'
        }, {
          date: '2014-02-21'
        }
      ],
    });
  }
});

App.IndexController = Ember.Controller.extend({
  months: function() {
    var model = this.get('model'),
      months = Ember.keys(model);
    return Ember.A(months.map(function(month) {
      return Ember.Object.create({
        month: month,
        dates: model.get(month)
      });
    }));

  }.property('model'),

  monthSorting: Ember.computed.sort('months', function(x, y) {
    var xTime = new Date(x.get('month')).getTime(),
      yTime = new Date(y.get('month')).getTime();
    if (xTime > yTime) return 1;
    else if (xTime === yTime) return 0;
    else return -1;
  })
});

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each month in monthSorting}}
    <li>
      <h2>{{month.month}}</h2>
      <ul>
        {{#each date in month.dates}}
        <li>{{date.date}}</li>
        {{/each}}
      </ul>
    </li>
    {{/each}}
  </ul>
</script>

Answer 2

我刚刚注意到 EmberJS 自 v1.10.0 以来使用 HTMLBars 作为 Handlebars 模板编译器。 HTMLBars 编译器允许使用助手作为子表达式（在 Ember v1.9.1 和 Handlebars v2.0.0 中，助手将他的结果直接输出到 html，而不是父助手），所以我创建了 handlebars 模拟lookup 帮手：

Ember.Handlebars.registerBoundHelper('lookup', function(obj, key) {
  return obj && obj[key];
});

助手允许编写这样的模板代码：

<ul>
  {{#each month in monthSorting}}
    <li>
      <h2>{{month}}</h2>
      <ul>
        {{#each obj in (lookup model month)}}
          <li>{{obj.date}}</li>
        {{/each}}
      </ul>
    </li>
  {{/each}}
</ul>

助手解决了使用动态键名访问对象内部属性的问题。

如何在 EmberJS 模板中访问存储在其他变量中的键中的对象属性的值？

How to get an access in EmberJS template to a value of the object property within key stored in other variable?

javascript

handlebars.js

ember.js

如何在 EmberJS 模板中访问存储在其他变量中的键中的对象 属性 的值？

How to get an access in EmberJS template to a value of the object property within key stored in other variable?

javascript

handlebars.js

ember.js

如何在 EmberJS 模板中访问存储在其他变量中的键中的对象属性的值？