在骨干.js中使用视图

Question

I'm currently learning backbone.js and have a little problem. I dont' quite get how the view works. I have created a model, a collection, and another model that again contains the collection:

Sensor = Backbone.Model.extend({
    defaults: {
        channel: '',
        name: '',
        temperature: 0,
        tempMin: 0,
        tempMax: 0
    }
});

SensorList = Backbone.Collection.extend({
    model: Sensor
});

Now I created a view, so I am able to render the sensor collection with handlebar.js template:

TemperatureView = Backbone.View.extend({

    initialize: function() {
        this.render();
    },

    render: function(eventName) {
        var source = $('#sensor-list-template').html();
        var template = Handlebars.compile(source);
        var html = template(this.collection.toJSON());

        this.$el.html(html);
    } 
});

Now I want to load some data and render the information. But I don't know how to get the data into my view...I tried this:

$(document).ready(function() {
    var temps = new TemperatureRequest();
    temps.fetch({
        success: function() {
            console.log(temps);
            var test = temps.get("sensors");
            console.log(test);

            var tempView = new TemperatureView({
                collection: test
            });

        }
    });
});

The data is fetched correctly. I have a collection of sensors. And now I want to pass them to the view so it is getting rendered....but I don't understand how this is done.. pls help!

Answer 1

Since you are passing the collection to the view while creating it, you can access the same using this.collection inside your view anywhere.

var tempView = new TemperatureView({
            collection: test
});

More over you have added the render function inside your initialize , it automatically calls the render function.Inside the render it fetches the collection and since your template needs only json object you are converting your collection it to json array objects.Templates takes care of appending the values to html.

If you want to add automatic view render to happen whenever the collection removes a model or adds a model into it you can add a listener and callback function to it

 initialize : function(){
    console.log("initializing view");
    this.collection.on('add', this.render, this);
    this.collection.on('reset', this.render, this);
    this.render();
  }

Answer 2

I just got it. Took me a while and I have definitly some reading to do.

There were several problems. First of all I have to overwrite the parse function, so the collection is stored correctly in my model:

TemperatureRequest = Backbone.Model.extend({
    urlRoot: '/temperatures',
    defaults: {
        timestamp: '',
        logfile: '',
        sensorList: new SensorList()
    },
    parse: function(response) {
        response.sensorList = new SensorList(response.sensors);

        return response;
    },

    success: function(response) {
        console.log('success');

    }
});

In my view I know add the listen to events as suggested and also fetch the data within the initialize function to get rid of the success callback:

TemperatureView = Backbone.View.extend({

    el: '#temperatures',

    initialize: function() {
        this.listenTo(this.model, 'reset', this.render);
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'add', this.render);

        this.model.fetch();
    },

    render: function(eventName) {
        var list = this.model.get('sensorList');
        console.log(list.toJSON());
        var source = $('#sensor-list-template').html();
        var template = Handlebars.compile(source);
        var html = template(list.toJSON());

        this.$el.html(html);
        this.renderTimestamp();
    },
    renderTimestamp: function() {
        var tsText = $("<p></p>").addClass("text-right");
        var timestamp = $("<div></div>").addClass("col-sm-4 col-sm-offset-8").append(tsText);
        tsText.text(this.model.get('timestamp'));
        $('#timestamp').append(timestamp);
    }
});

now I can do this to render the data:

$(document).ready(function() {
    var temps = new TemperatureRequest();
    var tempsView = new TemperatureView({
        model: temps
    });
});

Instead of passing the collection to the view I pass the model to it and fetch the data inside of the initialize function.

What I still don't understand is when I have to use "this" and when I have to use _bindAll...