如何使用骨干网从路由器中获取ID值

Question

我有一个router.js和view.js

我希望在查看页面中从router.js页面传递的ID值。 我该怎么办？

这是我的路由器：

/**
 * Created by HP on 6/26/2014.
 */

var app = app || {};
app.Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'color/:id': 'color'
    },
    index: function(){
        console.log("index called");
    },
    color: function(id){
        console.log("color called"+id);
        //viewPage.render(id);
    }
});

new app.Router;
Backbone.history.start();

在我看来，我想要在html元素中设置的id值这是我的视图 / ** *由HP在2014年6月17日创建。 * /

// site/js/views/library.js
var app = app || {};
app.LibraryView = Backbone.View.extend({
 el: '#ulMenu',
 initialize: function(options) {
this.collection = new app.Library();
this.collection.fetch({reset: true});
this.render();
this.listenTo( this.collection, 'reset', this.render );
 },
    events:{
        'click':'show'

    },
    show: function(){

        this.subRender();
    },
 render: function() {
      },

    subRender: function() {
        $("#content").html("Color Name: ");
    }
 });

Answer 1

请尝试以下代码。

color: function(id){
console.log("color called"+id);
viewPage = new ViewPage({model: new Model({'id':id})})
viewPage.render(id);
}

Answer 2

我认为您可以尝试将所有参数作为选项传递

路由器

var app = app || {};
app.Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'color/:id': 'color'
    },
    index: function(){
        console.log("index called");
    },
    color: function(id){
        console.log("color called"+id);
        var libraryView = new LibraryView({
              id : id    //passing it as option to views initalize.
         });
    }
});

new app.Router;
Backbone.history.start();

视图

var app = app || {};
app.LibraryView = Backbone.View.extend({
 el: '#ulMenu',
 initialize: function(options) {
this.receivedId = this.options.id; // id is catched here
this.collection = new app.Library();
this.collection.fetch({reset: true});
this.render();
this.listenTo( this.collection, 'reset', this.render );
 },
    events:{
        'click':'show'

    },
    show: function(){

        this.subRender();
    },
 render: function() {
      },

    subRender: function() {
        $("#content").html("Color Name: ");
    }
 });