使用json编码的php数组填充Backbone集合

时间:2014-08-01 18:32:24

标签: javascript php json backbone.js

我正在尝试一个简单的测试。从json编码的php数组中填充Backbone集合。

var MyObjectModel = Backbone.Model.extend({
    parse:function(response){
        return JSON.parse(response);
    }
});

var MyObjectView = Backbone.View.extend({
    template: _.template('<a id="<%= id %>" href="#"><%= name %></a>    '),
    render: function(){
        this.$el.html(this.template(this.model.attributes)); 
        return this;
    }
});

var MyList = Backbone.Collection.extend({
    url: 'testRest.php',
    model: MyObjectModel
});

var MyListView = Backbone.View.extend({
    el:$("#app"),
    initialize: function(){
        this.collection.on('add',this.addOne,this);
        this.collection.on('reset',this.addAll,this);
    },
    addOne: function(objectModel){
        var objectView = new MyObjectView({model: objectModel});
        this.$el.append(objectView.render().el);
    },
    addAll: function(){
        this.$el.empty();
        this.collection.forEach(this.addOne,this);
    },
    render: function(){
        return this;
    }
});

var myList = new MyList();
var myListView = new MyListView({collection:myList});

myList.fetch().done(function(){
    myListView.render();
});

HTML页面尽可能基本

<!DOCTYPE html>
<html>
    <head>      
        <title>TEST</title>
    </head>
    <body>
        <div id="app"></div>

        <script type="text/javascript" src="jquery-2.1.1.min.js"></script>  
        <script type="text/javascript" src="underscore-min.js"></script>    
        <script type="text/javascript" src="backbone-min.js"></script>  
        <script type="text/javascript" src="test2.js"></script> 
    </body>
</html>

当文件testRest.php包含

时,它可以正常工作
echo json_encode("{\"id\":\"4\",\"name\":\"one\",\"color\":\"ff6600\",\"phoneNumber\":\"+123456789\"}");

但是一旦我尝试在返回的对象中拥有更多的那一项:

echo json_encode("[{\"id\":\"4\",\"name\":\"one\",\"color\":\"ff6600\",\"phoneNumber\":\"+123456789\"},{\"id\":\"1\",\"name\":\"two\",\"color\":\"800080\",\"phoneNumber\":\"\"}]");

我有一个错误:

未捕获的ReferenceError:未定义id

有没有人遇到同样的问题?我错过了什么吗?

提前致谢。

1 个答案:

答案 0 :(得分:1)

你的Backbone代码没有任何问题,但你在php脚本上做了两件事:

1)将Content-type标头设置为json 2)json_encode采用php数组

<?php

header('Content-Type: application/json');

$resp = array(
    array(
        'id' => 4,
        'name' => 'one',
        'color' => 'ff6600',
        'phoneNumber' => '+123456789'
    ),
    array(
        'id' => 1,
        'name' => 'two',
        'color' => '80080',
        'phoneNumber' => ''
    )
);

echo json_encode($resp);

正如我在评论中所说,只要设置了JSON.parse标头,你就不需要Content-type jQuery已经解析为对象。解析的默认Backbone方法已经返回响应对象,因此您根本不需要覆盖(除非您获得嵌套数据)。