Backbone.js的款式无添加对象 [英] Backbone.js Collection Not Adding Objects

问题描述

我试图从服务器获取收集数据并将其加载到我的收藏对象，与Backbone.js的。我想获取这些数据在一开始，并与这些数据加载我的HTML页面。但是，我从服务器下载数据没有得到适当的填充到集合。收集长度为零，也有谁知道我做错了吗？

 （函数（$）{
    window.Menu = Backbone.Model.extend（{}）;    window.MenuCollection = Backbone.Collection.extend（{
        型号：window.Menu，
        初始化：功能（）{
            _.bindAll（这一点，'分析'）;
        }，
        网址：函数（）{
            回归的http：//本地主机：8080 /测试/ 123';
        }，
        解析：功能（RESP）{
            的console.log（RESP）;
            //这个打印：
            //[{名：helloworld1}，{名：helloworld2}]            this.add（RESP）;
            this.add（新菜单（{名字：黑色的perl}））;
            的console.log（本）;
            //对象在控制台日志长度为0
        }
    }）;    window.MenuView = Backbone.View.extend（{
        标签名：礼，
        初始化：功能（）{
            _.bindAll（这一点，'渲染'）;
        }，
        渲染：功能（）{
            $（this.el）的.html（'＆LT;跨度＆GT;'+ this.model.get（'名'）+'＆LT; / SPAN＆GT;'）;
            返回此;
        }
    }）;    window.MenuListView = Backbone.View.extend（{
        标签名：UL，
        初始化：功能（）{
            _.bindAll（这一点，'渲染'）;
        }，
        渲染：功能（）{
            this.model.each（功能（菜单）{
                $（this.el）.append（新MenuView（{模式：菜单}）渲染（）EL）;
            }）;            返回此;
        }
    }）;    VAR视图。
    APPVIEW = Backbone.View.extend（{
        EL：$（机构），
        初始化：功能（）{
            this.menus =新MenuCollection（）;
            this.menuListView =新MenuListView（{模式：this.menus}）;
            鉴于= this.menuListView;
            this.menus.fetch（{成功：函数（）{的console.log（成功）;
            的console.log（view.render（）埃尔。）;}}）;
        }，
        事件：{        }
    }）;    VAR APPVIEW =新APPVIEW;}）（jQuery的）;
 

解决方案

您是如何误解 解析 作品：

  

解析 collection.parse（响应）

  
  

解析被称为骨干每当一个集合的模型是由服务器返回，在取。该函数传递的原始响应对象，应该返回模型的属性数组添加到集合中。

所以，如果你得到 [{名：helloworld1}，{名：helloworld2}] 从服务器，你不甚至不需要一个解析实施

你与看到的奇怪行为添加更有趣。如果我们看一下 取 ，我们看到这样的：

 获取：功能（选件）{
  // ...
  options.success =功能（RESP，状态XHR）{
    集合[options.add？ 加：复位（collection.parse（RESP，XHR），期权）;
    如果（成功）的成功（收集，RESP）;
  };
  // ...
}
 

您正在呼叫取没有添加选项设置这样的事情发生是这样的：

1. collection.parse 被调用。


2. 您解析添加了一些事情，并呼吁的console.log 。


3. 您解析根本不返回任何东西。


4. collection.reset 被称为添加什么解析返回。


5. 重置将清除出的集合，然后添加任何内容，因为解析未返回任何内容。

一些的console.log 的实施摆在控制台实时参考，这就是为什么你在控制台中得到一个空的集合：的console.log（这一点）结束显示这个的之后的的重置通话

I am trying to fetch a collection data from the server and load it into my collection object, with Backbone.js. I want to fetch these data at the start, and load my html page with these data. However, the data I downloaded from the server does not get populated into the collection properly. The collection length is zero, do anyone know what I am doing wrong?

(function ($) {
    window.Menu = Backbone.Model.extend({});

    window.MenuCollection = Backbone.Collection.extend({
        model: window.Menu,
        initialize: function() {
            _.bindAll(this, 'parse');
        },
        url: function(){
            return 'http://localhost:8080/testing/123';
        },
        parse : function(resp) {
            console.log(resp);
            // this prints:
            // "[{"name":"helloworld1"},{"name":"helloworld2"}]"

            this.add(resp);
            this.add(new Menu({name:"black perl"}));
            console.log(this);
            // the length of the object in the console log is 0
        }
    });

    window.MenuView = Backbone.View.extend({
        tagName: 'li',
        initialize: function() {
            _.bindAll(this, 'render');
        },
        render: function() {
            $(this.el).html('<span>'+this.model.get('name')+'</span>');
            return this;
        }
    });

    window.MenuListView = Backbone.View.extend({
        tagName: 'ul',
        initialize: function() {
            _.bindAll(this, 'render');
        },
        render: function() {
            this.model.each(function(menu) {
                $(this.el).append(new MenuView({model:menu}).render().el);
            });

            return this;
        }
    });

    var view;
    AppView = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.menus = new MenuCollection();
            this.menuListView = new MenuListView({model:this.menus});
            view = this.menuListView;
            this.menus.fetch({success: function(){console.log("success");
            console.log(view.render().el);}});
        },
        events: {

        }
    });

    var appview = new AppView;

})(jQuery);

解决方案

You're misunderstanding how parse works:

parse collection.parse(response)

parse is called by Backbone whenever a collection's models are returned by the server, in fetch. The function is passed the raw response object, and should return the array of model attributes to be added to the collection.

So if you're getting [{"name":"helloworld1"},{"name":"helloworld2"}] from the server, you don't even need a parse implementation.

The strange behavior you're seeing with add is more interesting. If we look at fetch, we see this:

fetch: function(options) {
  //...
  options.success = function(resp, status, xhr) {
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
    if (success) success(collection, resp);
  };
  //...
}

You're calling fetch without the add option set so things happen like this:

1. collection.parse is called.
2. Your parse adds a few things and calls console.log.
3. Your parse doesn't return anything at all.
4. collection.reset is called to add what parse returned.
5. reset will clear out the collection and then adds nothing because parse didn't return anything.

Some console.log implementations put a live reference in the console, that's why you get an empty collection in the console: console.log(this) ends up showing this after the reset call.

这篇关于Backbone.js的款式无添加对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！