将JSON数据从Nodejs Express发送到Backbone

Question

I am trying to send some JSON data from express to Backbone model.

Update
console.log(response) in parse function of Model prints the values as {"version":"1.0","balance":"80.0"}

console.log(this.model) in the render() function of View gives {}

Server Side Node JS

var express = require('express');

var app = express();

app.listen(3000);

    app.get('/getInfo', function(req, res){
        //res.setHeader('Content-Type', 'application/json');
        res.json({version: "1.0", balance: "80.0"});
    });

On Node JS side I have tried following:

app.get('/getInfo', function(req, res){
    res.setHeader('Content-Type', 'application/json');
    res.send({version: "1.0", balance: "80.0"});
 });

Backbone Model

var Bitcoin = Backbone.Model.extend({
    url:'http://localhost:3000/getInfo',
    parse: function(response) {
        console.log(JSON.stringify(response));
        return response;
    }
});

var info = new Bitcoin ();
info.fetch();

It works fine if I change it to var info = new Bitcoin ({version: "1.0", balance: "80.0"});

Backbone View

var BitcoinView = Backbone.View.extend({
    id:'info',
    class:'bitcoin',
    template: _.template('<span> <%= balance %> </span>'+
                         '<span><%= version %></span>'),
    render: function() {
            console.log(JSON.stringify(this.model));
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
    }
});

var bitcoinView = new BitcoinView({model: info});
bitcoinView.render();

$('#app').html(bitcoinView.el);

Console

Uncaught ReferenceError: balance is not defined  (from View)
XHR finished loading: "http://localhost:3000/getInfo". 
{"version":"1.0","balance":"80.0"}  (from parse function)

Answer 1

You are likely trying to render a model that has no values for certain attributes. The template of your view expects these attributes to be present. Add defaults to your model to prevent the template method from causing an error.

var Bitcoin = Backbone.Model.extend({
    url:'http://localhost:3000/getInfo',
    parse: function(response) {
        console.log(JSON.stringify(response));
        return response;
    },
    defaults: {
        balance: "",
        version:""
    }   
});

In your view you bind the render to the change event of your model. This way the view will rerender when the model changes (the data is fetched).

this.model.bind("change", this.render, this);

Alternativaly, you need to make sure the data is fetched before rendering the view. You can use the callback function of the fetch function .

info.fetch({
   success: function(){
        //create view here
    }
});