如何在EmberJS模板中访问存储在其他变量中的键中的对象属性的值
How to get an access in EmberJS template to a value of the object property within key stored in other variable?
我想按特定顺序迭代对象属性。我已经准备了用例的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);
}
}
因此,问题是如何访问存储在其他变量中的键中的对象属性的值?
附言版本:EmberJS v1.9.1,Handlebars v2.0.0
p.S.S对不起我的英语
我刚刚注意到EmberJS自v1.0.0以来使用HTMLBars作为Handlebars模板编译器。HTMLBars编译器允许使用助手作为子表达式(在Ember v1.91&Handlebars v2.0.0中,助手将结果直接输出到html,而不是父助手),所以我创建了类似于查找助手的手把:
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>
该助手通过使用动态密钥名称来解决访问对象内部属性的问题。
不能仅通过使用动态键名来访问对象的内部属性。您可以操作计算属性months
来返回一个对象数组,其中包含月份关键字和日期
这是一个正在工作的JS Bin示例
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>
相关文章:
- 替换另一个变量对象中的变量值
- 如何从表单变量对象中获取特定的from属性
- 变量/对象是否按值传递,为什么我不能在 javascript 中使用变量更改对象的属性
- 执行上下文和变量对象在 JavaScript 中实际上是一回事吗?
- 如何将变量对象传递到多个javascript弹出窗体
- 如何将javascript变量/对象从一个页面传递到另一个页面
- 在具有递增的变量/对象中存储和控制传单 GeoJSON 图层
- 在回调中重用变量/对象
- 给一个有1个变量/对象的函数给定几个参数
- 使用单词'英语'因为变量/对象名称在javascript中不起作用
- 如何访问变量对象中的数据
- 使用onclick调用变量对象中的函数
- 使用Underscore JS部分和for循环的未定义变量对象
- 如何查看我的变量对象
- 变量对象属性名称作为javascript中的参数
- 从变量对象中移除DOM元素,以便将其发布到服务器
- 根据变量对象是否等于“true”输出内容
- 如何连接(变量+对象键名)以获得点表示法的对象值
- 为什么在ES5中将变量对象改为词法环境
- 动态引用变量(对象)