骨干路由器无法显示视图

Question

我花了很多时间学习 Backbone 的视图和模型。我现在正在尝试了解路由器以及如何实现它们。我不太清楚为什么我的路由器没有显示PriceView 视图。

我想显示点击链接时在集合模型中找到的价格。我不确定为什么这不起作用。

这是我的代码：http://jsfiddle.net/pHXQg/

这是我的 JavaScript：

// Model
var TheModel = Backbone.Model.extend({
    defaults: {
        name: '',
        shortDescription: '',
        price: ''
    }
});

// Collection
var TheCollection = Backbone.Collection.extend({
    model: TheModel
});

// Instantiate a new collection and populate it with some data.
var aCollection = new TheCollection({
    name: 'Mustang',
    shortDescription: 'Pretty nice even if it is overpriced',
    price: '9999'
});

// View for the title
var TitleView = Backbone.View.extend({
    el: '.js-title',

    initialize: function () {
        this.collection = aCollection;

        return this;
    },

    render: function () {
        var compiledTemplate = _.template( $('#title').html(), { data: this.collection.toJSON() });
        this.$el.html(compiledTemplate);

        return this;
    }
});

// View for the price
var PriceView = Backbone.View.extend({
    el: '.js-price',

    initialize: function () {
        this.collection = aCollection;

        return this;
    },

    render: function () {
        var compiledTemplate = _.template( $('#price').html(), { data: this.collection.toJSON() });
        this.$el.html(compiledTemplate);

        return this;
    }
});

// Instantiate a new TitleView
var titleView = new TitleView();
titleView.render();

// Router
var TheRouter = Backbone.Router.extend({
    routes: {
        'price': 'price' // #price
    },

    price: function () {
        new PriceView();
    }
});

// Instantiate a new Router
var router = new TheRouter();

// Start browser history
Backbone.history.start();

这是我的 HTML 和模板：

<script type="text/template" id="title">
    <h1><%- data[0].name %></h1>
    <a href="#price">Click here to see the price</a>
</script>

<script type="text/template" id="price">
    <p><%- data[0].price %></p>
</script>

<div class="container">

    <div class="row">
        <div class="js-title">

        </div>
    </div>

    <div class="row">
        <div class="js-price">

        </div>
    </div>

</div>

Answer 1

PriceView 的 render() 函数不会被路由器自动调用。

一种方法是将路由器更改为：

var TheRouter = Backbone.Router.extend({
    routes: {
        'price': 'price' // #price
    },

    price: function () {
        new PriceView().render();
    }
});