CODEWITHSUNDEEP
backbone.jsrequirejsunderscore.js
Obaidur Rahman
Obaidur Rahman

Reputation: 21

require.js / js file loads before DOM loaded

I am new in MVC framework like backbone.js. I am trying to make an application using backbone.js, require.js and underscore.js. I also added jQuery UI. There is a js file named widget.js which actually adjusts widgets like fixing position, firing some events when window re-sizes, firing ui events like button(), tab() etc.

Now the problem is when I open a page using a url directly (like http:://localhost/web/#/login), everything works well. But when I open that page from another page using navigation menu, there occurs a mass. The page looks ugly. I think this is because when I load the page using a url than widget.js loads after DOM is loaded but when I open the page using navigation, then widget.js loads before DOM is loaded. Wasted 3 days to find a solution .But no luck. Here is the code..

  define([
  'jQuery',
  'Underscore',
  'Backbone',
  'text!templates/loginForm.html',
  'text!templates/home.html',
  'libs/custom/widget',

], function($, _, Backbone, loginForm, homeTemplate, widget){
  var loginView = Backbone.View.extend({
    el: $("#page"),
    status: 'Failed',
    serverMsg:'Mail doesn\'t match',
    events:{
        "click .login":"login"
        },
    isLogedIn:function(){
        if(this.status=='Failed' || this.status==''){
            console.log("error");
            }else{
                console.log("succss");
                }

        },  
    login:function(e){
        e.preventDefault();
        var info = $(".loginForm").serialize();
        var url = 'http://rest.homeshop.dev/login/';
        var This = this;
        $.ajax({
            url:url,
            type:"POST",
            data:info,
            success:function(data){
                data = $.parseJSON(data);
                This.serverMsg = data.msg;
                This.status = data.status;s
                This.isLogedIn();
                }
            });
        return false;
        },  
    initialize: function(){
    },
    render: function(){
      var data = {};
      var compiledTemplate = _.template( loginForm, data);
     this.el.find('.carrier').html(compiledTemplate);
         }
  });
  return new loginView;
});

Also I did not added jquery Ui library here as I have added that library in application.js .Here is the codes for application.js

define([
  'jQuery',
  'Underscore',
  'Backbone',
  'router',
  'libs/custom/jqueryUi-min',
  'libs/custom/widget',
  'libs/custom/layoutSwitcher'
], function($, _, Backbone, Router){    
  var initialize = function(){
    Router.initialize();
  }

  return {
    initialize: initialize
  };
});

Can any one help me ?

Upvotes: 0

Views: 2290

Answers (1)

mikey
mikey

Reputation: 236

I think what you want is the domReady! plugin. http://requirejs.org/docs/api.html#pageload

define(['jQuery', 'Backbone', 'Router', 'libs/custom/widget', 'domReady!']
       , function($, Backbone, Router, widget, dom) {
            //execute your code knowing that the DOM has loaded.
       }
)

Hope this helps!

Upvotes: 4

Related Questions