0

backbone.js のような MVC フレームワークは初めてです。backbone.js、require.js、underscore.js を使用してアプリケーションを作成しようとしています。jQuery UI も追加しました。widget.js という名前の js ファイルがあり、位置の固定、ウィンドウのサイズ変更時のいくつかのイベントの発生、button()、tab() などの ui イベントの発生など、ウィジェットを実際に調整します。

問題は、URL を直接使用してページを開くと (http:://localhost/web/#/login など)、すべてが正常に機能することです。しかし、ナビゲーションメニューを使用して別のページからそのページを開くと、塊が発生します。ページの見栄えが悪い。これは、url を使用してページをロードすると、DOM がロードされた後に 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;
});

また、application.js にそのライブラリを追加したため、ここでは jquery Ui ライブラリを追加しませんでした。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 に答える