EmberJS使用视图处理DOM事件

我想使用视图切换单个表单（见下图）。 我的代码基本上工作，当我添加新的formset它添加一个空括号到json然后我打印出json使用eachloop

查看模板

{{#each view.anotherField}} 
 {{action 'toggleView' 'toggleViews' target='view'}} ... 
 {{#unless view.toggleViews}} ...content to toggle... {{/unless}} 

查看控制器？

 actions: { showMoreFields: function(){ this.get('anotherField').pushObject({name: ''}); 

，

 toggleView: function(param){ this.toggleProperty(param); } 

在这个给定的图片中你可以看到ive切换组织视图到真实我想要的只是切换点击的部分而不是所有的表格。 有解决方案吗？

干杯，

克里斯蒂安·

Answer 1

如果我理解正确，您需要处理视图的特定部分/forms的事件。 要实现这一点，至少有三种方法，

1.使用{{action}}助手传递要修改的对象。 然后在您的函数中修改该对象的属性并在模板中反映该属性，例如切换表单。 也许在你的情况下它可能是这样的，

 .... {{#each field in view.anotherField}} 
 {{action 'toggleView' field target='view'}} .... 

2.制作子视图/模板（例如SubFormView）以容纳每个表单并处理此视图中的切换事件。 然后通过主视图模板中的{{view}}帮助器包含此内容。

3.使用纯js DOM处理（无{{action}}帮助程序）并从那里调用你的ember组件。

方法1和3的示例可以在这里找到， http：//emberjs.jsbin.com/acUCocu/1

HBS

JS

 App = Ember.Application.create(); App.Router.map(function() { // put your routes here }); App.IndexRoute = Ember.Route.extend({ model: function() { return colors; }, actions:{ test:function(param){ alert('this is color:'+param.get('name')+" ("+param+")"); }, test2:function(elem){ alert('from pure js, clicked element: '+elem); $(elem).css('color','red'); } } }); App.Color = Ember.Object.extend({ name:null }); var colors=[]; colors.pushObject(App.Color.create({name:'red'})); colors.pushObject(App.Color.create({name:'green'})); colors.pushObject(App.Color.create({name:'blue'}));