如何输出JSON？

Question

<!DOCTYPE HTML>
<html>
<head>
<title></title>
    <link href="/bundles/hoaxpartner/css/style.css" type="text/css" rel="stylesheet" />
</head>
    <body>

    <div id="header">Backbone</div>
    <div id="sidebar"></div>
    <div id="content"></div>

    <script type="text/template" id="tpl-user-list-item">
        <a href='#users/<%= id %>'><%= name %></a>
    </script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

    <script>

        window.User = Backbone.Model.extend();

        window.UserCollection = Backbone.Collection.extend({
            model: User,
            url: "/app_dev.php/api/users/1/",
            parse : function(resp) {
                /*
                $.each(resp.users, function(key1, value1) {
                    resp.users[key1] = $.map(value1, function(value2, key2) { 
                        return [value2];
                    });
                });
                */
                return resp.users;
            },
        });

        // Views
        window.UserListView = Backbone.View.extend({

            tagName:'ul',

            initialize:function () {
                this.model.bind("reset", this.render, this);
            },

            render:function (eventName) {
                _.each(this.model.models, function (user) {
                    $(this.el).append(new UserListItemView({model:user}).render().el);
                }, this);
                return this;
            }

        });

        window.UserListItemView = Backbone.View.extend({

            tagName:"li",

            template:_.template($('#tpl-user-list-item').html()),

            render:function (eventName) {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }

        });

        // Router
        var AppRouter = Backbone.Router.extend({

            routes:{
                "":"list"
            },

            list:function () {
                this.userList = new UserCollection();
                this.userListView = new UserListView({model:this.userList});
                this.userList.fetch();
                $('#sidebar').html(this.userListView.render().el);
            }

        });

        $(function() {
            var app = new AppRouter();
            Backbone.history.start();
        });

    </script>

</body>
</html>

/app_dev.php/api/users/1调用输出：

{
  "users": [
    {
      "userid": "Jf9CEy70",
      "password": "g5JY9OB2",
      "status_id": 1,
      "created": "2014-01-13 18:33:25"
    },
    {
      "userid": "8LZVQX6b",
      "password": "QFzO92tM",
      "status_id": 1,
      "created": "2014-01-13 18:35:00"
    },
    {
      "userid": "cItWduq9",
      "password": "SuzcWisl",
      "status_id": 0,
      "created": "2014-01-13 18:35:21"
    }
  ]
}

数据是从“ /app_dev.php/api/users/1”API接收的，但是我一直坚持显示它。

Answer 1

1-尝试将此功能添加到您的收藏中：

parse : function(resp) {
    return resp.users;
}

因为您的集合正在等待模型数组，但它得到一个对象。

2-更改此ligne this.collection.on('change', this.render, this); 通过这个this.collection.on('reset', this.render, this); ，因为当集合从服务器接收数据时，它将触发一个reset事件（触发change的是Model）

3-添加此行

this.collection = new App.Collections.Models();

在这行之前

view = new App.Views.ModelsIndex({'collection': this.collection});

因为您使用的是this.collection而不进行初始化。

4-将App.Views.ModelsIndex的tagName更改为el并为它提供要呈现模板的位置的div（ '#someEl' ）

UPDATE

您的新问题是模板，模板中有一些错误（userId代替id，json中没有名称），这是一个有效的模板：

<script type="text/template" id="tpl-user-list-item">
    <a href = '#users/<%= userid %>' ><%= created %></a>
</script>

Answer 2

因为this.collection.fetch(); 是异步的，因此，如果您在initialize调用它，然后立即调用index ，则此时尚未“获取”该集合。 您应该更改代码以正确处理异步调用

另一件事是，您正在侦听change事件，该事件在集合中的每个模型都有更改时应用，您应该侦听reset事件（如果要在获取后重置模型）或sync （如果我没记错的话）

另一个可能有用的事件是request ，该request将在发送ajax请求后立即触发

更新：因此，在这种情况下，您可以更改

this.collection.on('change', this.render, this);

至

this.collection.on('sync', this.render, this);

并移动

this.collection.fetch();

到之后

view = new App.Views.ModelsIndex({'collection' : this.collection});

如何输出JSON？

问题描述

2 个解决方案

解决方案1
0 2014-01-30 12:54:02

UPDATE

解决方案2
0 2014-01-30 14:58:53

如何输出JSON？

问题描述

2 个解决方案

解决方案1 0 2014-01-30 12:54:02

UPDATE

解决方案2 0 2014-01-30 14:58:53

解决方案1
0 2014-01-30 12:54:02

解决方案2
0 2014-01-30 14:58:53