Backbone.js 路由不会触发页面渲染答案

【问题标题】：Backbone.js route doesnt trigger page renderBackbone.js 路由不会触发页面渲染
【发布时间】：2013-09-19 02:05:16
【问题描述】：

当我点击一个按钮时，我会在 View with 中捕捉到点击：

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);
    }
});

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

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

【问题讨论】：

标签： javascript jquery backbone.js routes

【解决方案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});

【讨论】：

Tnx 寻求答案。我确实更改了该错误，但页面仍然没有重新呈现..您可能需要查看其他任何内容才能找到错误？
你给Backbone.history.start()打过电话吗？ router.navigate 是否正确调用？如果是，parameter.value 的值是多少？ route:UIPage2 的回调根本没有被调用好吗？
我确实调用了 .start()，是的。调用Router.navigate：router.navigate("page2/" + parameter.value, {trigger:true});那样可以么？路由回调是什么意思：UIPage2？

【解决方案2】：

如果您的 URL 中有 www.xyz.com/#route1 并且您再次尝试执行 router.navigate('route1', {trigger: true});，这不会触发 route1 的路由处理程序，因为您已经在 route1 上。

如果您需要刷新页面，即重新渲染页面2，只需调用page2.render();。

如果您想使用路由器进行此操作，则必须临时更改路由，然后路由到您需要的页面。（注意：这会在您的路由历史记录中添加不必要的条目。）例如：如果您是已经在route1 即www.xyz.com/#route1 并且您想重新渲染视图，请关注 -

router.navigate('temp', {trigger : false});

以上行将更改地址栏中的 URL，但不会调用任何路由处理程序。在那次通话之后

router.navigate('route1', {trigger : true}); // this will now re-render view

【讨论】：