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
};
});
誰でも私を助けることができますか?