2012-09-26 69 views
0

我是MVC框架中的新成員,如backbone.js。我正在嘗試使用backbone.js,require.js和underscore.js來創建應用程序。我還添加了jQuery UI。有一個名爲widget.js的js文件,它實際上可以調整窗口小部件,如固定位置,當窗口重新調整尺寸時觸發一些事件,觸發ui事件,如按鈕(),tab()等。require.js/js文件在加載DOM之前加載

現在問題是當我打開一個頁面直接使用URL(如http :: // localhost/web /#/ login),一切正常。但是,當我使用導航菜單從另一個頁面打開該頁面時,會出現大量內容。該頁面看起來很醜。我認爲這是因爲當我使用url加載頁面而不是widget.js加載DOM後加載,但是當我使用導航打開頁面時,widget.js在加載DOM之前加載。浪費了3天才找到解決辦法。但沒有運氣。這裏是代碼..

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; 
}); 

我也沒加的jQuery UI庫這裏我已經加入該庫中的application.js。這裏是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 
    }; 
}); 

代碼可以在任何一個幫助我?

回答

4

我想你想要的是domReady!插入。 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. 
     } 
) 

希望這會有所幫助!