javascript - Backbone.js 路由不会触发页面渲染

Question

当我点击按钮时，我在 View 中捕捉到点击:

events:{
   'click .parameter-input a': 'saveParameter'
},

在 saveParameter 函数中我这样做:

saveParameter: function(ev) {
        parameter.value = $('.parameter-input .param').val();
        console.log(parameter.value);
        router.navigate("#/page2/" + parameter.value, {trigger:true});
        return false;           
    }

我的路线定义如下:

var Router = Backbone.Router.extend({
    routes: {
      "": "home",
      "page2/*parameter": "UIpage2",
    }
});

var page1 = new Page1();
var page2 = new Page2();

var router = new Router;
router.on('route:home', function() {
    page1.render();
    console.log("page1 render");
})
router.on('route:UIpage2', function(parameter){
    page2.render();
    console.log("page2 render " + parameter.value);
})

Page2 的定义如下:

    var Page2 = Backbone.View.extend({
    el:'.page',
    render: function() {
        var template = _.template($('#page2').html(), {parameter: parameter});
        this.$el.html(template);
    }
});

当我导航到 .page 时，如何强制使用 page2 渲染再次刷新它？ page2 上的渲染永远不会被调用..

编辑:参数是从某个输入框中取出的字符串值，需要显示在 mydomain.com/#/page2/parameter 等 URL 中以及 page2 上的某个 div 中。

Answer 1

哈希不应该在路由中，因此替换

router.navigate("#/page2/" + parameter.value, {trigger:true});

由

router.navigate("page2/" + parameter.value, {trigger:true});

还要确保您已使用 Backbone.history.start() 初始化了 Backbone 历史记录。

这是一个最小的工作示例。

var Router = Backbone.Router.extend({
  routes: {
    "": "index",
    "bar": "bar",
    "page2/*parameter": "foo"
  },

  index: function() {
    console.log("on page index");
  },

  bar: function() {
    console.log("on page bar");
  },

  foo: function(data) {
    console.log("on page foo with data: " + data);
  }
});


var router = new Router();
console.log("router created");
Backbone.history.start();
console.log("initializing backbone history");
router.navigate("bar", {trigger: true});
router.navigate("page2/foobar", {trigger: true});