将主干集合填充到表中答案

【问题标题】：Populate Backbone Collection to table将主干集合填充到表中
【发布时间】：2015-03-27 08:43:58
【问题描述】：

我已经获取了 JSON 数据，但是在表格中填充它时遇到了困难。有什么帮助吗？

我已经响应了json数据：

data                                    Object { 4c064462f170f63d57f55ab55e6b36f1={...}, b4f68bc5c045d2e88840995a47f7ddf5={...}}
    4c064462f170f63d57f55ab55e6b36f1    Object { rowid="4c064462f170f63d57f55ab55e6b36f1", id="1", qty="3", more...}
    b4f68bc5c045d2e88840995a47f7ddf5    Object { rowid="b4f68bc5c045d2e88840995a47f7ddf5", id="6", qty="2", more...}

这是我的 JS 代码

var Feed = Backbone.Model.extend({  
     });

var Stream = Backbone.Collection.extend({    
    url: function () {
        return BASE_URL + 'api/remotejson';
    },
    model: Feed,
    parse: function (response) {        
        var tags = response.data;
        return tags;
    } }); 

var FeedView = Backbone.View.extend({
    tagName: "tr",
    template: $("#feedTemplate").html(),
    render: function () {
        var tmpl = _.template(this.template);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    } });  

var StreamView = Backbone.View.extend({
    el: $("#main-section"),
    initialize: function () {        
        this.collection = this.options.collection;
        this.render();
        this.collection.on("add", this.renderFeed, this);        
    },
    render: function () {
        var that = this;
        this.collection.fetch({success: function () {
                _.each(that.collection.models, function (item) {
                    that.renderFeed(item);
                }, this);       
            }
        });
    },
    renderFeed: function (item) {        
        var feedView = new FeedView({
            model: item
        });

        this.$el.find('#options-table tbody').append($(feedView.render().el).hide().fadeIn('slow'));
    },    
    loadMore: function () {
        this.collection.page += 10;
        this.render();        
    } });

这是我的html模板

<div id="main-section">
    <table class="table table-striped" id="options-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script id="feedTemplate" type="text/template">
        <td><% rowid %></td>
        <td><% qty %></td>
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            var collection = new Stream();
            var streamView = new StreamView({collection: collection});
        });
    </script>
</div>

【问题讨论】：

它没有填充。 rowid，数量未定义。应该是两个条目将填充在表格上，但是当我使用虚拟数据进行测试时，只有一个条目正在填充span>
console model.toJSON() 在传递给模板之前检查你是否有模型中的属性
是的，有。我以前试过。
好的，你能显示你得到的确切错误吗？
当你控制台 model.toJSON() 这是结果 Object { 4c064462f170f63d57f55ab55e6b36f1={...}, b4f68bc5c045d2e88840995a47f7ddf5={...}}

标签： javascript json codeigniter backbone.js underscore.js

【解决方案1】：

数据必须是完美的键值对才能初始化模型。可以检查和修改 parse 中的数据

var Feed = Backbone.Model.extend({  
    parse : function(resp){
      return _.values(resp.data)[0]
          }
     });

在您的流视图中设置标志以执行解析

renderFeed: function (item) {        
        var feedView = new FeedView({
            model: item,
            parse:true
        });

        this.$el.find('#options-table tbody').append($(feedView.render().el).hide().fadeIn('slow'));
    },

【讨论】：