处理Ember视图中的单击事件(Handling a click event in an Ember View)

处理Ember视图中的单击事件(Handling a click event in an Ember View)

我想在单击下面的链接时展开ol元素。 我知道如何在点击ol本身时使其扩展。

App.MemberListingView = Ember.View.extend({ isExpanded: false, classNameBindings: ['isExpanded'], click: function() { return this.toggleProperty('isExpanded'); } });

模板：

{{#view 'App.MemberListingView'}} <ol class="member-listing"> {{#each}} {{user-card user=this}} {{/each}} </ol> <a href="#">Click here to see all</a> {{/view}}

我希望我的锚元素是点击触发器，而不是ol本身。 我该怎么做呢？ 我是否必须为链接编写单独的视图？

I want to make a ol element expand when a link below it is clicked. I know how to make it expand when the ol itself is clicked.

App.MemberListingView = Ember.View.extend({ isExpanded: false, classNameBindings: ['isExpanded'], click: function() { return this.toggleProperty('isExpanded'); } });

The template:

{{#view 'App.MemberListingView'}} <ol class="member-listing"> {{#each}} {{user-card user=this}} {{/each}} </ol> <a href="#">Click here to see all</a> {{/view}}

I want my anchor element to be the click trigger, not the ol itself. How do I do this? Do I have to write a separate view for the link?

最满意答案

我对Ember仍然很新，但这应该有效 -

{{#view 'App.MemberListingView'}} <ol class="member-listing"> {{#each}} {{user-card user=this}} {{/each}} </ol> <a href="#" {{action 'expandIt' target='view'}}>Click here to see all</a> {{/view}}

并在您的视图（或控制器） -

App.MemberListingController = Ember.Controller.extend({ isExpanded: false, classNameBindings: ['isExpanded'], actions: { expandIt: function() { return this.toggleProperty('isExpanded'); } } });

I am still very new to Ember as well but this should work -

{{#view 'App.MemberListingView'}} <ol class="member-listing"> {{#each}} {{user-card user=this}} {{/each}} </ol> <a href="#" {{action 'expandIt' target='view'}}>Click here to see all</a> {{/view}}

And in your view (or controller) -

App.MemberListingController = Ember.Controller.extend({ isExpanded: false, classNameBindings: ['isExpanded'], actions: { expandIt: function() { return this.toggleProperty('isExpanded'); } } });