CODEWITHSUNDEEP
ember.js
Lux
Lux

Reputation: 18240

Action on self created View

If I've a simple template with a Button which has an Action, and create a ember View using this template, how can I let the action target the function on teh View.

Example: http://jsfiddle.net/Krutius/DxsXz/

Handlebars / HTML:

<div id="content">
    <div id="main"></div>
</div>

<script type="text/x-handlebars" data-template-name="test">
    <button class="btn btn-primary" {{action go}}>Suchen</button>
</script>​

JavaScript:

$(function() {
    App = Em.Application.create({
        rootElement: "#content"
    });

    Em.View.create({
        templateName: 'test',
        go: function() {
            alert: "go";
        }
    }).append("#main");
});​

Upvotes: 0

Views: 232

Answers (1)

pangratz
pangratz

Reputation: 16143

The problem is your append call: Ember.View#append does not take any arguments, see the code.

I don't know what the final application / html should look like, so there are several answers how you could solve your problem. The simplest would be to inline the button into a template for the application, see http://jsfiddle.net/pangratz666/vY9PE/:

Handlebars:

<script type="text/x-handlebars" data-template-name="test">
    <div id="content">
        <div id="main">
            <button class="btn btn-primary" {{action go}}>Suchen</button>
        </div>
    </div>
</script>​

JavaScript:

App = Em.Application.create({});

Em.View.create({
    templateName: 'test',
    go: function(evt) {
        console.log('go', evt);
    }
}).append();​

Ember.js IS able to insert an element at a specific position though, but this should only be necessary for an applications' main view. So you could use Ember.View#appendTo(target). But again, this should only be used in rare cases.

Upvotes: 2

Related Questions