我面臨解決寫代碼的問題,但我不想那樣做。
所以我想如何解決這個問題作爲美麗的編程方面。骨幹和對象之間通信的動態加載模板
我想過一些解決方案。
1.父對象事件綁定添加到路由器
例如,當用戶訪問example.com/#aaa,example.com/#bbb 我加載路由器#標籤比處理該事件。
如果用戶訪問#aaa,則加載模板aaa。
,但我發現很多參考,但我不知道如何實現的解決方案是在Backbone.js的家長和孩子溝通的對象
2.父對象添加功能
我認爲解決方案訪問url存儲目標路由器
例如,如果我訪問example.com/#aaa,則路由器被寫入target = aaa 然後父對象加載函數並呈現ansync ajax加載模板並拋棄結果子對象。
但同樣我沒有ablity實現是。
誰會給我提示?
很多backbone.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 = Backbone.View.extend({
render: function(html) {
var templateName = home;
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 = templateName ='home'; ~~
views.Situation = tamplateName ='Situation'; ~~
如何解決?