backbone 中的动态加载模板和对象之间的通信

Question

我遇到了解决写重复代码的问题，但我不想那样。
所以我认为如何解决这个问题作为美丽的编程方面。

我想到了一些解决办法。
1。父对象添加事件绑定到路由器
例如用户访问 example.com/#aaa , example.com/#bbb 我加载路由器主题标签而不是处理该事件。
如果用户访问#aaa 然后加载模板 aaa。

但我找到了很多参考，但我不知道如何在 backbone.js

实现父子对象通信的解决方案

2。父对象添加函数
我认为访问 url 的解决方案将目标存储在路由器
中例如，如果我访问 example.com/#aaa 然后路由器被写入 target = aaa 然后父对象加载函数并渲染 ansync ajax 加载模板并折腾结果子对象。

但同样我也没有能力实现它。

谁能指点一下？

很多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: function(target) 原来在source下

  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 = 模板名称 = 'home'; ~~
views.Situation = 模板名称 = 'Situation'; ~~

如何解决？

Answer 1

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 并抛出子对象，然后子对象呈现此模板字符串。

backbone 中的动态加载模板和对象之间的通信

dynamic load template in backbone and comunication between object

javascript

jquery

backbone.js