CODEWITHSUNDEEP
javascriptjqueryember.js
Charly Palencia
Charly Palencia

Reputation: 202

Emberjs after change content events

Feature: After add a new "tab" could action the alert event like the default ones.

Idea:

Help please

JSFiddle http://jsfiddle.net/chalien/Hxste/2/

solved by pangratz Thanks for your help and refactor :)

http://jsfiddle.net/chalien/Hxste/

Upvotes: 2

Views: 510

Answers (2)

Mike Aski
Mike Aski

Reputation: 9236

Simply replace:

$(".test").click(function(){

by:

$(".test").on('click', function(){

which will register the handler for all present & future matching elements...

More info @ http://api.jquery.com/on/

Upvotes: 0

pangratz
pangratz

Reputation: 16153

You can use the action Handlebars helper, see http://jsfiddle.net/jmDXP/

Handlebars:

<script type="text/x-handlebars" id="mainview" >
    {{#each list}}
    <div {{action "clicked"}} >{{title}} / {{desc}}</div>
    {{/each}}
</script>

<script type="text/x-handlebars" >
    <div id="container"></div>
    {{#view App.TabView}}
        {{view Ember.TextField valueBinding="title"}}
        {{view Ember.TextField valueBinding="desc"}}
        <button {{action "addTab" }} >Add</button>
    {{/view}}
</script>
​

JavaScript:

var get = Ember.get;

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

App.Tab = Ember.Object.extend({
    title: null,
    desc: null
});

App.TabsController = Ember.ArrayController.create({
    content: [],
    resourceType: App.Tab,
    addTab: function(title, desc) {
        this.pushObject(App.Tab.create({
            title: title,
            desc: desc
        }));
    },
    init: function() {
        this._super();
        var i = 0;
        for (i = 0; i <= 4; i++) {
            this.addTab("hola" + i, "test " + i);
        }
    }
});

App.TabView = Ember.View.extend({
    addTab: function() {
        var title = get(this, 'title');
        var desc = get(this, 'desc');
        App.TabsController.addTab(title, desc);
    }
});

App.initializeView = Ember.View.create({
    templateName: 'mainview',
    listBinding: 'App.TabsController',
    clicked: function(view, event, context) {
        console.log('clicked @', get(context, 'title'));
    }
});

App.initializeView.appendTo('#container');​

Note: in the upcoming version the arguments of an action callback changed, see emberjs action event.target is undefined

Upvotes: 1

Related Questions