骨干视图不适用于提取的json [英] backbone views not working with fetched json

问题描述

提取后，我在同步从服务器接收的JSON数据到我的视图时遇到问题.

I'm having issues syncing JSON data received from the server with my views after a fetch.

我没有"mainmodel"的集合，因为我一次只使用一个"mainmodel"，但是使用多个"mymodel"，所以结构如下:

I do not have a collection of "mainmodel", because I'm only working with one "mainmodel" at a time but numerous "mymodel", anyhow, the structure follows:

    var mymodel = Backbone.Model.extend({
        defaults: {k1:"",
                   k2:"",
                   k3:""}
    });

    var collection = Backbone.Collection.extend({model:mymodel,});

    var mainmodel = Backbone.Model.extend({
        defaults: {v1:"",
                   v2:"",
                   v3:"",
                   v4:new collection()
    });

我从父视图中的渲染函数为"mymodel"创建嵌套视图.仅当我使用新模型时，此方法才有效.

I create the nested views for "mymodel" from a render function in a parent view. This works..., only when I'm working with a new model.

// My ParentView render function
render: function() {
for (var i = 0; i < this.model.v4.length;i++) {
    var view = new MyModelView({model:this.model.v4.at(i)});
    this.$el.append($(view.render().el));
}
this.$el.append(this.template(this.model.toJSON()));
return this;
},

// The MyModelView render function below 
render: function() {
    this.$el.html(this.template(this.model.toJSON()));
return this;
},

现在，如果我打开我的应用程序并从那里创建模型，以上方法就可以工作.但是，如果我打开我的应用程序并提供ID，则会对服务器进行提取，检索数据并创建一个新的ParentView，最终会收到一个错误消息，内容为"this.model.v4.at not a function". gh.

Now, the above works if I open my application and create models from there. However, If I open my app and supply an id, I make a fetch to the server, retrieve the data, and create a new ParentView I end up getting an error that says "this.model.v4.at not a function". Ugh.

现在，如果我将FIRST渲染函数更改为，请将at(i)更改为[i]

So now, if I change the FIRST render function to be, changing the at(i) to [i]

    var view = new MyModelView({model:this.model.v4[i]});

并将第二个渲染函数更改为:

And change the second render function, removing toJSON, to be:

    this.$el.html(this.template(this.model)); 

它呈现.但是我仍然无法无误地浏览视图.没有惊喜. 我已经使用console.log(JSON.stringify(this.model));当它们到达parentView和MyModelView时.返回的JSON看起来是这样的，无论是获取还是创建的.

It renders. But I still can't move around views without errors. No surprise. I have used console.log(JSON.stringify(this.model)); as they arrive into the parentView and MyModelView. The JSON returned looks like this, whether fetched or created.

    {"v1":"val1",
     "v2":"val2,
     "v3":"val3",
     "v4":[{"k1":"key1","k2":"key2","k3","key"}, { ... }, { ... }]
    }

JSON数据结构似乎相同.我以为JSON格式不正确，所以我在将模型传递到视图之前尝试使用JSON.parse，但这没有用.也许我还没走，但是我本来以为我遇到了JSON格式问题，但是现在我不知道了.服务器返回的内容为"application/json".

The JSON data structures appear to be identical. I thought the JSON format was incorrect, so I tried using JSON.parse before handing the model to the view, but that didn't work. Maybe I'm way off, but I originally thought I had a JSON formatting issue, but now I don't know. The server is returning content as 'application/json'.

v1，v2，v3的JSON值正确呈现.

The JSON values for v1,v2,v3 render correctly.

有什么想法吗?

推荐答案

您有两个问题:一个是您知道的，另一个是您不知道的.

You have two problems: one you know about and one you don't.

您所知道的问题是，您的mainmodel不会自动将您的v4 JSON转换为集合，因此最终会得到一个期望集合的数组.您可以通过在mainmodel:

The problem you know about is that your mainmodel won't automatically convert your v4 JSON to a collection so you end up with an array where you're expecting a collection. You can fix this by adding a parse to your mainmodel:

parse: function(response) {
    if(response.v4)
        response.v4 = new collection(response.v4);
    return response;
}

您不知道的问题是，您在mainmodel中的defaults存在隐藏的引用共享问题:

The problem you don't know about is that your defaults in mainmodel has a hidden reference sharing problem:

var mainmodel = Backbone.Model.extend({
    defaults: {
        //...
        v4: new collection()
    }
});

您在Backbone.Model.extend对象中定义的所有内容最终都会出现在模型的原型中，因此整个defaults对象将由模型的所有实例共享.同样，Backbone将defaults的浅表副本复制到您的新模型中.因此，如果您m1 = new mainmodel()和m2 = new mainmodel()，则m1和m2将具有完全相同的v4属性.您可以使用 defaults :

Anything you define in the Backbone.Model.extend object ends up on your model's prototype so the entire defaults object is shared by all instances of your model. Also, Backbone will do a shallow copy of defaults into your new models. So if you m1 = new mainmodel() and m2 = new mainmodel(), then m1 and m2 will have exactly the same v4 attribute. You can solve this by using a function for defaults:

var mainmodel = Backbone.Model.extend({
    defaults: function() {
        return {
            v1: '',
            v2: '',
            v3: '',
            v4: new collection()
        };
    }
});

这篇关于骨干视图不适用于提取的json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！