Question

我是MVC框架中的新人，比如backbone.js。我正在尝试使用backbone.js，require.js和underscore.js创建一个应用程序。我还添加了jQuery UI。有一个名为widget.js的js文件，它实际上调整了小部件，如固定位置，在窗口重新调整大小时触发一些事件，触发按钮（），tab（）等ui事件。

现在的问题是当我直接使用url打开页面时（比如http :: // localhost / web /＃/ login），一切运行良好。但是当我使用导航菜单从另一个页面打开该页面时，会出现一个质量。该页面看起来很难看。我认为这是因为当我在加载DOM之后使用url而不是widget.js加载页面时，但是当我使用导航打开页面时，则在加载DOM之前加载widget.js。浪费了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
  };
});

任何人都可以帮助我吗？

Answer 1

我觉得你想要的是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.
       }
)

希望这有帮助！

在加载DOM之前加载require.js / js文件

1 个答案: