Question

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

更新
模型的console.log(response)中的parse function将值打印为{"version":"1.0","balance":"80.0"}

View的console.log(this.model)函数中的

render()给出{}

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

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

如果将其更改为，则可以正常工作 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);

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

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

将Nodejs Express中的JSON数据发送到Backbone

1 个答案: