Discourse plug-in - Ember.Component not firing actions

Question

I am learning how to build a plug-in for Discourse. My plug-in is going ok from a rendering standpoint but the button created by the buffer doesn't appear to be resolving the action on the button in the overridden handlebars template.

My JavaScript asset that is registered -

(function() {
"use strict";

Discourse.AssetValuationComponent = Ember.Component.extend({
    // Id of the element for tracking
    elementId: '1234',
    // Classes to apply to the element
    // classNames: ['asset-valuation-box'],

    actions: { 
        alerttitle: function (topic) {
            console.log(this);
            console.log(topic);
        }
    },

    render: function(buffer) {
        var topic = this.get('topic');
        buffer.push("<div class='asset-valuation-box'>");           
        buffer.push("<button {{action 'alerttitle' topic }}>Click me!</button>");
        buffer.push("</div>");
    }
});
})();

My handlebars template -

{{asset-valuation user=currentUser asset=model}}

It is rendering the button but clicking the button doesn't fire the alerttitle action - I'm wondering if it is because using the render is after Ember walks the DOM or something. Any thoughts?

Answer 1

render just injects strings into the dom. You'd be better off defining the template using the templateName or template parameter like so:

App.AssetValuationComponent = Ember.Component.extend({
    // Id of the element for tracking
    elementId: '1234',
    template :Ember.Handlebars.compile("<div class='asset-valuation-box'><button {{action 'alerttitle' topic }}>Click me!</button></div>"),
    // Classes to apply to the element
    // classNames: ['asset-valuation-box'],

    actions: { 
        alerttitle: function (topic) {
            console.log(this);
            console.log(topic);
        }
    }
});

http://emberjs.jsbin.com/mivif/1/edit