0
私は、プルブレムに直面して、反復コードを書くことに直面しましたが、私はそれを望んでいません。
私はこの問題を美しいプログラミングの面で解決する方法を考えています。バックボーンの動的負荷テンプレートとオブジェクト間のコミュニケーション
私はいくつかの解決策を考えました。訪問example.com/#aaa、example.com/#bbb iがそのイベントを処理するよりも、ルータのハッシュタグを読み込むとき1.親オブジェクトは、例えばルータ
にユーザーをイベントバインドを追加
。
ユーザーが#aaaにアクセスしてからテンプレートaaaを読み込むと、
しかし、私が訪問し解決策を考え、私は多くの参照を見つけることが、私は機能
を追加BACKBONE.JS
2.親オブジェクトの親と子オブジェクト通信でそのソリューションを実装する方法がわかりません例えば、私がexample.com/#aaaを訪れた場合、ルータはtarget = aaa と書かれ、親オブジェクトは関数をロードし、ansync ajaxのロードテンプレートをレンダリングし、結果の子オブジェクトを投げる。
しかし、同様に私はablityを実装していません。
誰かが私にヒントを与えますか？
多くのバックボーン.jsの参照は難しく難しいです。
router.js（私の元）
var app = app || {};
(function() {
'use strict';
var views = app.view = app.view || {};
app.Router = Backbone.Router.extend({
initialize: function(){
this.bind("all", this.change)
console.log(this.change);
},
routes: {
'situation': 'situationRoute',
'video': 'videoRoute',
'culture': 'cultureRoute',
//와일드카드 디폴트 라우터는 맨 마지막에 삽입.
'*home': 'homeRoute'
},
_bindRoutes: function() {
if (!this.routes) return;
this.routes = _.result(this, 'routes');
var route, routes = _.keys(this.routes);
while ((route = routes.pop()) != null) {
this.route(route, this.routes[route]);
}
},
initialize: function() {
// create the layout once here
this.layout = new views.Application({
el: 'body',
});
},
homeRoute: function() {
var view = new views.Home();
var target = 'Home';
this.layout.renderSubpage(target);
this.layout.setContent(view);
},
situationRoute: function() {
var view = new views.Situation();
var target = 'Situation';
this.layout.setContent(view);
},
videoRoute: function() {
var view = new views.Video();
var target = 'Video';
this.layout.setContent(view);
},
cultureRoute: function(){
var view = new views.Culture();
var target = 'Culture';
this.layout.setContent(view);
}
});
var router = new app.Router();
Backbone.history.start();
})();
view.js（私の元）
var app = app || {};
(function() {
'use strict';
//views linitalize
var views = app.view = app.view || {};
views.Application = Backbone.View.extend({
initialize: function() {
this.$content = this.$('#container');
//this.$loading = this.$('#loading');
},
setContent: function(view, target) {
var content = this.content;
this.renderSubpage();
if (content) content.remove();
content = this.content = view;
this.$content.html(content.render().el);
},
showSpinner: function() {
this.$loading.show();
},
hideSpinner: function() {
this.$loading.hide();
},
renderSubpage: function(target){
var target = target;
var templateName = target;
var tmpl_dir = '../assets/static';
var tmpl_url = tmpl_dir + '/' + templateName + '.html';
var tmpl_string = '';
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
dataType : html,
success: function (data) {
tmpl_string = data;
}
});
var template = _.template(tmpl_string);
this.$el.html(template);
return this;
}
});
views.Home = Backbone.View.extend({
render: function(html) {
return this;
//how to get return result? in parent object?
}
});
views.Stuation = Backbone.View.extend({
render: function() {
var template = _.template("<strong><% print('Hello ' + page); %></strong>");
var pageTxt = {page: "About"};
var html = template(pageTxt);
this.$el.html(html);
return this;
}
});
views.Video = Backbone.View.extend({
render: function() {
var template = _.template("<strong><% print('Hello ' + page); %></strong>");
var pageTxt = {page: "Contact"};
var html = template(pageTxt);
this.$el.html(html);
return this;
}
});
views.Culture = Backbone.View.extend({
render: function() {
var template = _.template("<strong><% print('Hello ' + page); %></strong>");
var pageTxt = {page: "Contact"};
var html = template(pageTxt);
this.$el.html(html);
return this;
}
});
})();
renderSubpage：機能（ターゲット）は、ソースの下に元々あります。
私は反復コードを望んでいません。 views.Home = templateName = 'home'; ~~
views.Situation = tamplateName = '状況'; ~~
どのように修正するのですか？