2017-01-08 85 views
0

我面臨解決寫代碼的問題,但我不想那樣做。
所以我想如何解決這個問題作爲美麗的編程方面。骨幹和對象之間通信的動態加載模板

我想過一些解決方案。
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'; ~~

如何解決?

回答

0
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; 
      var subUrl = this.target; 

      if (content) content.remove(); 
      //if (content || target) content.remove()target.remove(); 

      content = this.content = view; 
      subUrl = this.target = target; 

      var templateName = subUrl; 
      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; 
       } 
      }); 
      console.log(tmpl_string); 
      this.$content.html(content.render(tmpl_string).el); 
     }, 
     showSpinner: function() { 
      this.$loading.show(); 
     }, 
     hideSpinner: function() { 
      this.$loading.hide(); 
     } 
    }); 
    views.Home = Backbone.View.extend({ 
     render: function(templateName) { 
     var template = _.template(templateName); 
     this.$el.html(template); 
     return this; 
     } 
    }); 

我使用Ajax調用subUrl解決ploblem使用功能參數折騰孩子對象,然後子對象呈現此模板字符串。