[英]How to iterate over class variables from Handlebars in ember-cli?
I'd like to iterate over a class variable array in Handlebars in ember-cli to generate a list of checkboxes (categories), with the appropriate ones checked off based on which categories the model belongs to. 我想遍历ember-cli中的Handlebars中的类变量数组,以生成复选框(类别)列表,并根据模型所属的类别来选中相应的复选框。
I have several issues: - I can't figure out how to access the class variable in ember-cli. 我有几个问题:-我不知道如何在ember-cli中访问类变量。 I've seen tutorials showing that in ember.js, it's just App.Listing.CATEGORIES, but I'm not getting any passes through my each loop.
我看过一些教程,显示在ember.js中,它只是App.Listing.CATEGORIES,但我的每个循环都没有通过。 - How to check off the appropriate box?
-如何选中相应的框? I have some janky code below that probably doesn't work.
我下面有一些垃圾代码可能无法正常工作。
listing.js: listing.js:
import DS from "ember-data";
var Listing = DS.Model.extend({
categories: DS.attr(), // string array
});
Listing.reopenClass({
CATEGORIES: ['park', 'outdoors']
});
export default Listing;
show.hbs: show.hbs:
<ul>
{{#each category in CATEGORIES}}
<li>{{input type="checkbox" name=category checked=categories.contains(category)}} {{category}}</li>
{{/each}}
</ul>
Handlebars templates can't look up classes like that, nor does complex logic like categories.contains(category)
work. 车把模板不能像这样查找类,也不能像
categories.contains(category)
这样的复杂逻辑工作。 You'll need to add a computed property to the controller or component to supply proxy objects to the template. 您需要向控制器或组件添加一个计算属性,以向模板提供代理对象。 Assuming it's a controller, here's a rough example:
假设它是一个控制器,这是一个粗糙的示例:
export default Ember.Controller.extend({
selectableCategories: function() {
var model = this.get('model');
return model.constructor.CATEGORIES.map(function(category) {
var categoryProxy = Ember.Object.create({
model: model,
name: category,
checked: function(key, value) {
var model = this.get('model');
// setter; the checkbox value has changed
if (arguments.length > 1) {
if (model.get('categories').contains(this.get('name'))) {
model.get('categories').removeObject(this.get('name'));
}
else {
model.get('categories').addObject(this.get('name'));
}
}
// getter; the template is checking whether the checkbox should be checked
return model.get('categories').contains(this.get('name'));
}.property('model.categories')
});
return categoryProxy;
});
}.property('model.categories')
});
The selectableCategories
computed property returns an array of objects that observe the model's categories
attribute and represent whether or not each category is found within it. 所述
selectableCategories
计算属性返回观察模型的对象的数组categories
属性和表示每个类别是否被内它找到。
Then in your template, you can use the proxy objects like this: 然后,在模板中,您可以使用以下代理对象:
{{#each category in selectableCategories}}
{{input type="checkbox" name=category.name checked=category.checked}} {{category.name}}
{{/each}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.