javascript - 通过查询字符串值渲染 View 的主干

Question

我有动态链接，并希望通过链接的查询字符串呈现 View 。

链接格式如下:

mysite.com/#content/id/subid/queryString=test1 //test1 is dynamic, it can be test1,test2 or the other value

我可以在主视图中通过this.options.queryString获取查询字符串。

主视图:

define(["jquery" ,
    "underscore" ,
    "backbone" ,
    "text!templates/Content/mainTemplate.html",
    "views/test1",
    "views/test2"
],function($ , _ , Backbone, MainTemplate, test1, test2){

    var mainView = Backbone.View.extend({
      initialize : function(option){
      },
      event : {

      },
      render : function(){
        var _content= _.template(MainTemplate);
        this.$el.append(_content);

        var view = this.option.queryString;
        var renderView = new view();
        $("#subDiv").html(renderView.render().$el);
     }
  });
  return mainView;
});

我想做的是:当queryString = test1时，我将渲染一个 View 名称test1。

有什么可行的方法吗？

Answer 1

尝试按照这些思路进行操作(前提是您有一个真正的查询字符串，前面带有 ? 就像我评论的那样)。请注意，这只是伪代码。

define([
    'jquery',
    'underscore',
    'backbone',
    'text!templates/Content/mainTemplate.html',
    'views/test1',
    'views/test2'
], function($, _, Backbone, MainTemplate, test1, test2) {
    'use strict';

    var MainView = Backbone.View.extend({
        getParameterByName: function(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
        },

        render: function(){
            var _content= _.template(MainTemplate);
            this.$el.append(_content);

            var SubView = require('views/' + this.getParameterByName('queryString'));
            var subView = new SubView();

            this.$el('.sub-div').html(subView.render().$el);
        }
    });

    return MainView;
});