主干路由器不能显示视图

Backbone Router not working to display view

本文关键字：显示 视图 不能 路由器      更新时间：2023-09-26

我花了很多时间学习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>

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

一种方法是将路由器更改为: 
var TheRouter = Backbone.Router.extend({
    routes: {
        'price': 'price' // #price
    },
    price: function () {
        new PriceView().render();
    }
});
相关文章：