CODEWITHSUNDEEP
ember.js
Rocky
Rocky

Reputation: 401

Delay the loading of an Ember View template until completion of AJAX request

It doesn't look like it is possible to delay the load of a template until a response comes back from an AJAX request inside the willInsertElement property of an Ember View?

I would like to load jquery-ui.min.js before the template renders.

window.App = Ember.Application.create()

App.TestView = Ember.View.create
    tagName: 'div'
    template: Ember.Handlebars.compile '<div>This is a view</div>'
    willInsertElement: ->
      $.ajax({
        url: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"
        dataType: "script"
        async: false
        success: (data, textStatus, jqxhr) ->
          console.log data
          console.log textStatus
          console.log jqxhr.status
          console.log "Load was performed."
      });
    didInsertElement: ->
      console.log 'the element was inserted'

App.TestView.append()

I'm finding that the didInsertElement runs before the AJAX request is finished.

Thanks in advanced.

Upvotes: 0

Views: 1571

Answers (2)

pangratz
pangratz

Reputation: 16143

What do you want to achieve in the end? Assure that jquery-ui is available before the view is inserted?

  • You could append your view in the success callback then, see http://jsfiddle.net/RgcJA/
  • I haven't tested your code, but is $.getScript executed asynchronously? Have you tried setting async: false?

Upvotes: 2

Veebs
Veebs

Reputation: 2388

You can try binding the visible property of your view to a variable and then toggling that variable when your file upload has completed.

You will also have to start the file upload outside willInsertElement

Upvotes: 0

Related Questions