This may ultimately be a build tool question.
But in many cases I think there is really great conceptual advantage to visualize a component as a standalone, self contained thing. To further promote this concept it might be really handy to have a way to group component logic and template code into a single file, especially if the logic and template are not that complex.
I was wondering if anyone have thoughts on how this could actually be done.
Here is a concrete example:
Imagine all this code in single file called
my-widget.component.js
App.MyWidgetComponent = Ember.Component.extend({
someproperty: null,
actions: {
doSomething: function(input) {
// Send action to external scope
this.sendAction('action', input);
}
},
setupDefaults: function(){
// implement setup bootstrapping when added to DOM
}.on("didInsertElement")
});
// Handlebars Template Code
<script type="text/x-handlebars" data-template-name="components/my-widget">
<h2>My Widget</h2>
{{someproperty}}
<button {{action "doSomething"}}>Do Something</button>
</script>
/*
* Handlebars Usage
{{my-widget action="externalFunction" someproperty="externalValue"}}
*/
The problem is that I would like to do the above but express the template code as pure Javascript and not have to resort to some hacky use of eval.
I would even be fine if there was a asset-pipeline type convention where we pre process the file and split apart the template and logic. Using some block notation for the Handlebars segment.
Perhaps use a special file name suffix for the pre-processor.
my-component.js.embercomponent
Would be awesome if we could get the same pattern to be supported in both ember rails and grunt based ember app kit.
Thoughts?
