Dynamically loading Ember templates with asynchronous requests

Question

Dynamically loading Ember templates with asynchronous requests

I need a way to dynamically load HTML content from another file using the code below:

App.MainView = Ember.View.extend({
  template:function(){
    $.ajax({
       url: 'views/main.html',
       dataType: 'text',
       async: false,
       success: function (res) {
         returnnow(res);
       }
    });
    function returnnow(res){
      return Ember.Handlebars.compile(res);
    }
  } 
});

Unfortunately, this code doesn't seem to be working properly. It may be due to the asynchronous nature of Ajax requests.

I can't simply wrap the View with an Ajax call because I want to load it only when needed. Any suggestions on how to solve this issue?

javascript jquery ajax ember.js

Answer 1

Answer №1

Looks like you're not receiving any output because your template function is not returning anything. To fix this issue, consider updating your code as shown below:

App.MainView = Ember.View.extend({
    template: function(){
       var result;
       $.ajax({
            url: 'views/main.html',
            success: function(data) {
                result = Ember.Handlebars.compile(data);
            }
       });
       return result;
    }
});

Answer 2

Looks like you're not receiving any output because your template function is not returning anything. To fix this issue, consider updating your code as shown below:

App.MainView = Ember.View.extend({
    template: function(){
       var result;
       $.ajax({
            url: 'views/main.html',
            success: function(data) {
                result = Ember.Handlebars.compile(data);
            }
       });
       return result;
    }
});

Dynamically loading Ember templates with asynchronous requests

Answer №1

Similar questions

Utilizing dynamic meta tags in React JS with a PHP backend and Redux integration

Using Node.js to extract text from a local file on Azure using OCR technology

Visitor capacity for the website has been restricted

Having trouble running Ajax with JavaScript on a Wamp server

Guide to automatically sending users to a subdomain depending on their IP address location

NextJs not processing Bootstrap form submissions

Analyzing User Input and Database Information with Mongodb

What is the best way to load my CSS file using express.static?

Capture all URLs containing [...slug] and generate static props only for valid addresses in Next.js

JQuery Accordion SubMenu/Nested Feature malfunctioning

Internet Explorer experiencing problems with JSON when using ajax请求

deleting the current product information during an ajax request

Issue encountered while attempting to save a value in localStorage

Optimizing rest service calls with $resource

the process of configuring date string for x-axis labels in chartjs

What is the proper way to enable the Google Analytics cookie only once another consent cookie has been set and is marked as "true"?

How to apply styling to a specific portion of text within a list element using Vue.js

jQuery Mobile panel buttons are functioning properly within a maximum width of 300 pixels

What is the best way to use a computed property as a style value for a component in Vue.js?

What is the best way to fetch the title property from my Campaign Contract for displaying it in the render method?