CODEWITHSUNDEEP
ember.js
user2022581
user2022581

Reputation: 973

child view not handling event in emberjs

I have a template as part of a page that looks like so:

<script type="text/x-handlebars" data-template-name="listbeer">

    <table>
    {{#each content}}
        {{#view "DHApp.BeerrowView"}}
        <tr>
            <td><button>{{name}}</button></td>
            <td>{{brewery}}</td>
        </tr>   
        {{/view}}

    {{/each}}
    </table>
</script>

I also have two views, one encapsulating the table and one that encapsulates rows. When I click on the button only the parent (whole table) view click handler gets called(the one below that says parent picked up click). I can't make the child view handler be called. Any ideas why as I've tried various things and cant get anywhere?

The views code looks like so:

DHApp.BeerrowView = Ember.View.extend({
        click: function(evt) {
            alert("ClickableView was clicked!");
        }
    });

DHApp.ListbeerView = Ember.View.extend({
        templateName: 'listbeer',
        click: function(evt) {
            alert("parent picked up view");
        }
    });

Thanks

Upvotes: 1

Views: 401

Answers (1)

Shimon Rachlenko
Shimon Rachlenko

Reputation: 5517

You need to define your BeerrowView the following way:

DHApp.BeerrowView = Ember.View.extend({
    tagName: 'tr',
    click: function(evt) {
        alert("ClickableView was clicked!");
    }
});

and the template:

<script type="text/x-handlebars" data-template-name="listbeer">

    <table>
        {{#each content}}
            {{#view "DHApp.BeerrowView"}}
                <td><button>{{name}}</button></td>
                <td>{{brewery}}</td>
            {{/view}}

       {{/each}}
    </table>
</script>

The reason after that is that the view adds an extra div if you don't define the tag name.
See ember view guide for further reference..

Upvotes: 2

Related Questions