如何使用backbone.js从路由器中获取ID值答案

【问题标题】：How Get ID value from router in view using backbone.js如何使用backbone.js从路由器中获取ID值
【发布时间】：2014-06-26 11:53:34
【问题描述】：

我有一个 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 值 这是我的观点 /** * 由惠普于 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: ");
    }
 });

【问题讨论】：

我是否遗漏了什么，或者您只需要在视图上创建一个setColor 方法，然后在路由器调用viewPage.setColor(id);viewPage.render(); ？
您也可以发布您的查看代码吗？你走在正确的轨道上，但如果我们也能看到你的观点，那么提供代码示例会更容易。
@BGR 如果这是 set 方法，那么 get 机制是什么？
@AlexP 感谢您的回复。这是我的查看代码：var app = app || {}; app.LibraryView = Backbone.View.extend({ el: '#ulMenu', 初始化: function(options) { this.collection = new app.Library(); this.collection.fetch({reset: true}); 这个.render(); this.listenTo( this.collection, 'reset', this.render ); }, events:{ 'click':'show' }, show: function(){ this.subRender(); }, render: function() { }, subRender: function() { $("#content").html("Color Name: ");//这里需要id } });

标签： javascript backbone.js backbone-views backbone-routing

【解决方案1】：

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

路由器

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

【讨论】：

【解决方案2】：

请尝试以下代码。

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

【讨论】：

谢谢。我认为这是传递价值的方式。那么下一步将是什么，即如何在我的视图页面中获取价值？
请使用以下行在您的视图中获取“id”。 [如果您喜欢我之前的回答，请点击“向上”图标] this.model.get('id')