CODEWITHSUNDEEP
ember.js
Piotr
Piotr

Reputation: 223

insert view with dynamic template

I'm trying to inset a dynamic view(to make a tooltip) that have a dynamic template to render in so inside im creating and appending a view to the parent element. I get following error 

Uncaught Error: assertion failed: You specified the templateName ... for <(subclass of Ember.View):ember1104>, but it did not exist.

the template exist and i can add the view in other templates with view helper. Here is my parent view example : 

App.ModalOverlayView = Ember.View.extend
  templateName: 'modal_overlay/layout'

didInsertElement: ->
  textView = Ember.View.extend({templateName: @get('templateToShow')}).create()
  textView.appendTo(@$('.text'))

Upvotes: 0

Views: 987

Answers (1)

Juan Jardim
Juan Jardim

Reputation: 2252

Bassically I did what you want in sections of a page.

So what I did was had a container view for the view that I wanted to be render. For example:

{{view MainApp.AppContainerView elementId="appContainerView"}}

Then, when I need a espefic templete to be render inside that container, I loded it by ajax. For example, if I wanted to show the template "xpto", I had this template in a file called "xpto.handlebars". So I did this:

 view = Ember.View.create({
                willInsertElement : function(){
                    var isLoaded = this.isLoaded;
                    if(!isLoaded){
                        getTemplate("/app_dev/templates/" + templateName + ".handlebars", this);
                    }
                }
            });

Where "templateName" its the name of your template that you want to show, in this case its "xpto", and "getTemplate" its an ajax function to get the template:

function getTemplate(path, view){
    $.ajax({
        url: path,
        xhrFields: {
            withCredentials: true
        },
        //cache: true,
        success: function(data) {
            var templateName = "";
            $(data).filter('script[type="text/x-handlebars"]').each(function() {
                templateName = $(this).attr('data-template-name');
                Ember.TEMPLATES[templateName] = Ember.Handlebars.compile($(this).html());
            });
            if(view != null){
                view.set("templateName", templateName);
                view.rerender();
            }

        }               
    });    
}

and finally I did this to add the view into the container:

    var containerView = Em.View.views['appContainerView']; 
    if(containerView == undefined)
        return;
    var temp =  containerView.toArray(); 
    if(temp.length > 0)
        containerView.unshiftObject();
    containerView.addObject(view);

I hope this can help you,

Juanito

Upvotes: 3

Related Questions