如何使用骨干網從路由器中獲取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: ");
    }
 });