如何使用Backbone js中的函数从视图调用另一个视图

Question

Is there an underscore or backbone function I can use to call a view from another view? I only want to display info using the History view but I am having trouble calling it.

var CityModel = Backbone.Model.extend({
defaults: {
    city: null,
    nickName: null,
    founded: null
}
});
var StudentCollection = Backbone.Collection.extend({
   Model: CityModel
});

// This outputs the data when there is a click event
var History = Backbone.View.extend({
    tagName: 'li',
    template: _.template("<h2><%= city %></h2>"),
    initialize: function(){
        this.render();
    },
    render: function(){
        this.$el.html(this.template(this.model));
        $('.History').append(this.$el);
        return this;
    }
});

I want to call the History View from the CityView function click event which I named displayFunction

var myCityTemplate = '<h1 class= "displayInfo" name= "showCity"><%= city %></h1>';
var CityView = Backbone.View.extend({
    tagName: "li",
    template: _.template(myCityTemplate),
    initialize: function(){
        this.listenTo(this.model, 'change', this.render);
    },
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    events:{
        'click .displayInfo':'displayFunction'
    },
    displayFunction: function(){
        // This is to find where city lives, check out the console.log without the innerHTML
        // console.log(this.$el.find('h1[name= "showCity"]')[0].innerHTML);
        CityName = this.$el.find('h1[name= "showCity"]')[0].innerHTML;
        console.log(Cities.where({city: CityName}));
        var myCity = Cities.where({city: CityName});
        var CityHistory = new History({model: myCity});
    }
});

I call the History view using the model mycity, which I define once I get data from the click event. I do have data when I console.log the Cities.

var CityListView = Backbone.View.extend({
    el: ".cities",
    initialize: function(){
        this.render();
    },
    render: function(){
        this.$el.empty();
        this.collection.each(function(places){
            var MetropolisViewModel = new CityView({model: places});
            this.$el.append(MetropolisViewModel.render().$el);
        }, this);
    }
});
var city1 = new CityModel({city: "Anaheim", nickName: "Disney", founded: "1840"});
var city2 = new CityModel({city: "Las Vegas", nickName: "Sinners",   founded: "1889"});
var city3 = new CityModel({city: "New York", nickName: "City of hope", founded: "1750"});
var city4 = new CityModel({city: "Palm Springs", nickName: "Very hot", founded: "1849"});
var Cities = new StudentCollection([city1, city2, city3, city4]);
var myCityList = new CityListView({collection: Cities});

Everything works, its only that issue of calling the History view from the cityView which doesn't seem to work. My goal is use History view as a way of only displaying data from each city to my HTML.

Answer 1

I figured it out, the problem was that when I use

this.$el.html(this.template(this.model)

in the History View, the data that I will be displaying, is in a different format as compared to the data that gets displayed from the CityView, which I use

this.$el.html(this.template(this.model.toJSON()));

to display the data. So the problem wasn't about calling the view but displaying the data differently. Differently because when I get information from a model the format is different enough to have issues displaying that data. Thus, I used this.$el.html(this.template(this.model[0].attributes)); in my History view to properly output data.