在骨干.js中使用视图

Question

我目前正在学习ribs.js，有一个小问题。 我不太了解视图的工作原理。 我创建了一个模型，一个集合以及另一个再次包含该集合的模型：

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

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

现在，我创建了一个视图，因此可以使用handlebar.js模板渲染传感器集合：

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

现在，我想加载一些数据并呈现信息。 但是我不知道如何将数据导入我的视图...

$(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
            });

        }
    });
});

数据已正确提取。 我有一组传感器。 现在，我想将它们传递给视图，以便呈现它。...但是我不知道该如何完成.. 请帮助！

Answer 1

由于在创建集合时将其传递给视图，因此可以在视图内部的任何位置使用this.collection访问该集合。

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

此外，您在initialize中添加了render函数，它会自动调用render函数。在render内部，它获取集合，并且由于模板仅需要json对象，因此您可以将集合将其转换为json数组对象。 html的值。

如果要在集合删除模型或向其中添加模型时添加自动视图渲染，则可以向其添加侦听器和回调函数

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

Answer 2

我知道了 花了我一段时间，我确实已经做了一些阅读工作。

有几个问题。 首先，我必须覆盖parse函数，因此该集合正确存储在我的模型中：

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');

    }
});

在我看来，我知道按照建议添加监听事件，并且还可以在initialize函数中获取数据以摆脱成功回调：

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

现在，我可以执行此操作以呈现数据：

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

我没有将集合传递给视图，而是将模型传递给它，并在initialize函数内部获取数据。

我仍然不了解的是何时必须使用“ this”以及何时必须使用_bindAll ...