我正在构建一个呈现复选框组的handelbars帮助器。我的目标是显示一个带有以下内容的复选框组,并在selectedOptions
以下位置进行双向绑定:
{{form-checkboxGroup options=allOptions selectedOptions=selectedOptions}}
我已经将这种模式成功地与其他表单组件一起使用,这是一个很大的胜利。我可以将我的allOptions
和selectedOptions
值呈现为复选框组,但这是双向绑定使我绊倒了。知道我想念的是什么吗?
顺便说一句,我正在使用ember-cli
,但这不会影响与此问题有关的任何内容。
这是我的设置:
车把帮手:helpers / form-checkbox-group.js
该文件的唯一目的是将Handelbars表达式链接{{form-checkboxGroup}}
到下面的视图和模板。
import FormCheckboxGroupView from 'my-app/views/util/form/form-checkbox-group';
export default Ember.Handlebars.makeBoundHelper(function( options ) {
return Ember.Handlebars.helpers.view.call(this, FormCheckboxGroupView, options);
});
CheckboxGroup把手模板:templates / util / form / form-checkbox-group.hbs
...
{{#each user in view.combinedOptions}}
{{input type="checkbox" name="view.fieldName" checked=user.checked }} {{user.name}}
{{/each}}
...
CheckboxGroup视图:views / util / form / form-checkbox-group.js
...
export default FormCheckboxGroupView = Ember.View.extend( FormFieldMixin, {
templateName: 'util/form/form-checkbox-group',
selectedOptions: function() {
console.log("When triggered this could update view.selectedOptions");
}.observes('[email protected]'),
// combines the "options" and "selected options" into a single array of "combinedOptions" explicitly indicating what's checked
combinedOptions: function() {
...
// sample result of combinedOptions:
// { name: "Johnny Five", id: "12", checked: true }
return combinedOptions;
}.property('view.options', 'view.selectedOptions')
});
最后,要实际使用我的Handlebars帮助器,这是使用页面的模板和相应的控制器:
消费页面:templates / my-page.hbs
{{form-checkboxGroup options=allUsersArray selectedOptions=selectedUsersArray fieldName="selectedProvidersArray" }}
消耗页面的后备控制器:controllers / my-page.js
export default MyPageController = Ember.Controller.extend( FormMixin, {
allUsersArray: [
{ name: 'Bill Huxtable', id: 'billy' },
{ name: 'Samantha Jones', id: 'jones' },
{ name: 'Tony Pepperoni', id: 'tonyp' },
{ name: 'Ridonk Youliss', id: 'silly' }
],
selectedUsersArray: [
{ name: 'Tony Pepperoni', id: 'tonyp' },
{ name: 'Ridonk Youliss', id: 'silly' }
],
...
});
因此,所有这些都成功地很好地呈现了复选框组,但是我无法捕捉使用复选框新选中复选框这一事实observes("[email protected]')
。
关于如何实现双向绑定的任何想法吗?在此先感谢您的协助!
没有jsbin,所以我视而不见,但是请尝试以下操作:
selectedOptions: function() {
console.log("When triggered this could update view.selectedOptions");
}.observes('[email protected]')
view.property
这是您从模板访问视图的方式。您不需要视图本身(除非您view
在视图中具有属性)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句