Question

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

链接格式如下：

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时，我将呈现一个视图名称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;
});

通过查询字符串值的骨干渲染视图

1 个答案: