0

我是 MVC 框架的新手，比如主干.js。我正在尝试使用backbone.js、require.js 和underscore.js 制作一个应用程序。我还添加了 jQuery UI。有一个名为 widget.js 的 js 文件，它实际上调整了小部件，例如固定位置，在窗口重新调整大小时触发一些事件，触发 ui 事件，例如 button()、tab() 等。

现在的问题是，当我直接使用 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

1 回答 1

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

希望这可以帮助！

于 2012-09-28T11:47:18.570 回答