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?
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);
}
}
});