在模型中设置的backbone.js初始化不影响集合中的模型

时间:2015-08-02 18:48:40

标签: backbone.js

在我的主干集合上执行fetch(),并将模型实例化为该集合的子节点时,我想为每个模型添加一条信息。

我认为我可以在模型初始化中使用set来执行此操作。 (我的假设是fetch()为每个传递给它的对象实例化一个新模型。因此,每次初始化时都会设置额外的数据。

为了说明我的问题,我已经粘贴了四个片段,首先来自我的收藏课程。其次是我的模型类中的初始化函数。第三,我在初始化函数中使用的两个函数从flickr api获取所需的信息。第四,最后是执行fetch()

的app.js

首先是集合类:

var ArmorApp = ArmorApp || {};
ArmorApp.ArmorCollection = Backbone.Collection.extend({
    model: ArmorApp.singleArmor,
    url: "https://spreadsheets.google.com/feeds/list/1SjHIBLTFb1XrlrpHxZ4SLE9lEJf4NyDVnKnbVejlL4w/1/public/values?alt=json",
  //comparator: "Century",
  parse: function(data){
    var armorarray = [];
    var entryarray = data.feed.entry;
    for (var x in entryarray){
        armorarray.push({"id": entryarray[x].gsx$id.$t,
                          "Filename": entryarray[x].gsx$filename.$t, 
                          "Century": entryarray[x].gsx$century.$t,
                          "Date": entryarray[x].gsx$date.$t,
                          "Country": entryarray[x].gsx$country.$t,
                          "City": entryarray[x].gsx$city.$t,
                          "Type": entryarray[x].gsx$type.$t,
                          "Maker": entryarray[x].gsx$maker.$t,
                          "Recepient": entryarray[x].gsx$recipient.$t,
                          "Flickrid": entryarray[x].gsx$flickrid.$t,
                          "FlickrUrl": "", //entryarray[x].gsx$flickrurl.$t,
                          "FlickrUrlBig": ""//entryarray[x].gsx$flickrurlbig.$t,
                        });
      }
      return armorarray;
  }
});

其次,在我的模型中初始化。

initialize: function(){
        //console.log("A model instance named " + this.get("Filename"));
        item = this;
        var flickrapi = "https://api.flickr.com/services/rest/?&method=flickr.photos.getSizes&api_key=<my_apikey>&photo_id=" + this.get("Flickrid") + "&format=json&jsoncallback=?"; 
        sources = getFlickrSources(flickrapi);
        sources.then(function(data){
            sourceArray = parseFlickrResponse(data);
            FlickrSmall = sourceArray[0].FlickrSmall;
            console.log (FlickrSmall);

            item.set("FlickrUrl", FlickrSmall);
            console.log(item);
        });

请注意我是如何获取“Flickrid”并使用获取更多信息,然后尝试使用item.set("FlickrUrl", FlickerSmall);

将其添加回模型中

console.log确认属性“FlickrUrl”已设置为所需的值。

第三,这些是我的模型用来获取闪烁api所需信息的函数。

var getFlickrSources = function(flickrapi){
  flickrResponse = $.ajax({
      url: flickrapi,
      // The name of the callback parameter, as specified by the YQL service
      jsonp: "callback",
      // Tell jQuery we're expecting JSONP
      dataType: "jsonp"})

  return flickrResponse;
}

var parseFlickrResponse = function(data){
  flickrSourceArray = []

  if (data.stat == "ok"){
    sizeArray = data.sizes.size;
    for (var y in sizeArray){
      if (sizeArray[y].label == "Small"){
        flickrSourceArray.push({"FlickrSmall": sizeArray[y].source});
      }
      else if (sizeArray[y].label == "Large"){
        flickrSourceArray.push({"FlickrLarge": sizeArray[y].source});
      }
    }
  }

  return flickrSourceArray
}

但是,第四,当我尝试执行fetch并渲染集合时,我只在我的集合中获取没有设置FlickrUrl属性的对象。

//create an array of models and then pass them in collection creation method
var armorGroup = new ArmorApp.ArmorCollection();

armorGroup.fetch().then(function(){
  console.log(armorGroup.toJSON());
  var armorGroupView = new ArmorApp.allArmorView({collection: armorGroup});
  $("#allArmor").html(armorGroupView.render().el);
});

var armorRouter = new ArmorApp.Router();

Backbone.history.start();

最后一个片段中的console.log打印出所有通过fetch实例化的对象/模型。但是它们都不包括在初始化期间应该set的额外属性。

任何想法发生了什么?

1 个答案:

答案 0 :(得分:0)

这个功能是什么? getFlickrSources(flickrapi)

为什么在initialize函数中使用this.get?老实说,你想要做的事情看起来过于复杂。

如果要在实例化模型时设置一些参数,请执行此操作 var model = new Model({param:“someparam”,url:“someurl”,wtv:“somewtv”} );

如果要更新模型,只需在模型中编写更新函数,例如 update:function(newparam){this.set; ... etc ,并在需要时调用它

如果我读得很好,你只想在模型实例化时设置一些参数,所以只需使用我上面指定的。这是一些更多的文档:http://backbonejs.org/#Model-constructor

我希望它有所帮助。

修改

将你的电话放在你的模特之外,你不应该(imo)在你的模型中打电话,这样看起来有点脏。

Sources.then(function(flickrdata) {
    var mymodel = new Model({flicker:flickrdata.wtv});
});

在我看来会更清洁。