Template for modal from remote page - ember.js

Question

I am implementing modals as an ember component and I was wondering if and how could this be accomplished: If the content of the modal is coming from a different page, how would it be rendered as a template:
Example:
http://jsfiddle.net/koala_dev/NUCgp/918/
The script above opens a modal with this content:
http://fiddle.jshell.net/bHmRB/51/show/
But what if I wanted some extra data that depends on specific users, coming from the routes model? How would I insert something like
{{#each link in links}}
{{#link-to 'link.url'}}{{link.title}}{{/link-to}}
{{/each}}
into the remote page, so it would be rendered as a template, and not regular text?

Answer 1

Here is a very quick and easy example just to give you a right direction. You can play with it and parse the html to extract content (which is not relevant to the question).
You can setup a component for modal element. I've setup a component property (attribute) contentURL where you can set the url of the content.
Component handlebars
Notice the {{content}} which we used later in the action to save the ajax result. Action showModal is added on the link to execute the ajax call.
<script type="text/x-handlebars" id="components/bootstrap-modal">
<a data-toggle="modal" data-target="#myModal" {{action "showModal"}}>Click me !</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">{{content}}</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</script>
Component JS
App.BootstrapModalComponent = Ember.Component.extend({
/*initModal: function(){
}.on('didInsertElement'),*/
contentURL: null,
content: 'Content is loading...',
actions: {
showModal: function(){
var self = this;
var contentURL = this.get('contentURL');
if(contentURL == null){
this.set('content', '<p>No content url is given</p>');
}
console.log('get content from url > ' + contentURL);
$.ajax({
url: contentURL,
dataType: "html",
beforeSend: function(){console.log('before send');},
error: function(xhr, status, message){
console.log(message);
},
success: function (content) {
// parse and get the right html for the content
self.set('content', content);
}
});
}
}
});
Now you can call the component bootstrap-modal on your template like {{bootstrap-modal}}
For example:
<script type="text/x-handlebars" id="index">
{{bootstrap-modal contentURL="http://fiddle.jshell.net/bHmRB/51/show/"}}
</script>
jsFiddle example http://jsfiddle.net/sisir/NUCgp/1713/