将 JSON 数据从 Nodejs Express 发送到 Backbone

Question

我正在尝试将一些 JSON 数据从 express 发送到 Backbone 模型。

更新
console.log(response) in parse function of Model 将值打印为{"version":"1.0","balance":"80.0"}

View的render()函数中的console.log(this.model)给出{}

服务器端节点 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"});
    });

在 Node JS 方面，我尝试了以下操作：

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

主干模型

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

如果我把它改成 var info = new Bitcoin ({version: "1.0", balance: "80.0"});

主干视图

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

控制台

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

您可能正在尝试渲染一个没有某些属性值的模型。您的视图模板期望这些属性存在。将defaults 添加到您的模型中，以防止template 方法导致错误。

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

在您看来，您将render 绑定到模型的更改事件。这样，当模型更改（获取数据）时，视图将重新呈现。

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

或者，您需要确保在渲染视图之前获取数据。您可以使用callback function of the fetch function。

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