Backbone.js的取（）JSON模型得到（）returnes不确定 [英] Backbone.js fetch() JSON to model get() returnes undefined

问题描述

基本上我想要提取的 JSON 文件，并将其存储在一个典范。然而，当我尝试通过 GET访问属性（）则返回undefined。因此，可以说JSON文件中有一个数组游戏，包括有一些属性的对象。它没有真正的问题。只想将它们保存在模型中，并对其进行访问。所以我做这样的事情。

  VAR球员= Backbone.Model.extend（{
   初始化：功能（应用程序，期权）{
      this.app =应用;
      VAR _this =这一点;      this.fetch（{
         网址：someurl
         成功：函数（）{
            的console.log（成功）;
         }
      }）;
   }
}）;VAR instplayer =新的球员（）;
instplayer.on（'变'，函数（）{
   的console.log（模型）;
   的console.log（model.get（游戏））;
}）
 

所以我想，我需要一个事件来确保的get（）当数据真正可用之称。但是，这仍然返回undefined。我需要做什么呢？谢谢你。

解决方案

所以，我以为你有一个JSON为您的播放器这样的（我嘲笑它的这里以下的例子来工作）：

  {
    用户名：乔，
    游戏：
        {
            头衔：吃豆子
        }，{
            头衔：超级马里奥}
    ]
}
 

这就是我如何处理管理和渲染这种数据的完整工作示例：

\r

\r

VAR游戏= Backbone.Model.extend（{\r
  默认值：{\r
    标题：''\r
  }\r
}）;\r
\r
VAR游戏= Backbone.Collection.extend（{\r
  型号：游戏\r
}）;\r
\r
VAR球员= Backbone.Model.extend（{\r
  默认值：{\r
    用户名： ''\r
  }，\r
  网址：'http://www.mocky.io/v2/56261127250000a01accb34f'，\r
  初始化：功能（）{\r
    this.games =新游戏（）;\r
    this.listenTo（这一点，同步，this.initGames）;\r
    this.fetch（）;\r
  }，\r
  initGames：功能（）{\r
    this.games.add（this.get（'游戏'））;\r
    this.trigger（'准备好'，这一点）;\r
  }\r
}）;\r
\r
VAR PlayerView = Backbone.View.extend（{\r
  模板：_.template（'＆LT; H1＆GT;＆LT;％=用户名％GT;＆LT; / H1＆gt;和他的比赛：其中，醇类=游戏＆GT;＆LT; / OL＆GT;'），\r
  渲染：功能（）{\r
    这$ el.html（this.template（this.model.toJSON（）））;\r
    this.model.games.each（this.renderGame，这一点）;\r
    返回此;\r
  }，\r
  renderGame：功能（游戏，我）{\r
    VAR gameView =新GameView（{模式：游戏}）;\r
    gameView.render（）$ el.appendTo。（$（）这个'游戏'）;\r
  }\r
}）;\r
\r
VAR GameView = Backbone.View.extend（{\r
  标签名：礼，\r
  模板：_.template（'＆LT;强＆GT;游戏：其中; / STRONG＆GT;＆LT;％=标题％GT;'），\r
  渲染：功能（）{\r
    这$ el.html（this.template（this.model.toJSON（）））;\r
    返回此;\r
  }\r
}）;\r
\r
\r
VAR花花公子=新播放器（）;\r
dude.on（'准备好'，功能（播放器）{\r
  VAR playerView =新PlayerView（{模式：玩家}）;\r
  playerView.render（）$ el.appendTo（document.body的）。\r
}）;

\r

＆LT;脚本的src =HTTP：//$c$c.jquery。 COM / jquery.js和'＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本的src =HTTP：//underscorejs.org/underscore.js'>＆LT; / SCRIPT＆GT;\r
＆LT;脚本的src =HTTP：//backbonejs.org/backbone.js'>＆LT; / SCRIPT＆GT;

\r

\r

\r

Basically I want to fetch a JSON file and store it in a model. However, when I try to access the attributes via get() it returns undefined. So lets say the JSON file has an array games that consists of objects with some attributes. It doesnt really matter. Just want to save them in the model and access them. So I'm doing something like this.

var player = Backbone.Model.extend({
   initialize: function(app, options) {
      this.app = app;
      var _this = this;

      this.fetch({
         url: "someurl",
         success: function() {
            console.log("success");
         }
      });
   }
});

var instplayer = new player();
instplayer.on('change', function(){
   console.log(model);
   console.log(model.get(games));
})

So I figured that I need an event to ensure that get() is called when the data is really available. But this still returns undefined. What do I need to do? Thanks.

解决方案

So I imagined you have a json for your player like this (I've mocked it here for the example below to work):

{
    "username": "joe",
    "games": [
        {
            "title": "Pacman"
        }, {
            "title": "Super Mario" } 
    ]
}

And here's a complete working example of how I would deal with managing and rendering this kind of data:

var Game = Backbone.Model.extend({
  defaults: {
    title: ''
  }
});

var Games = Backbone.Collection.extend({
  model: Game
});

var Player = Backbone.Model.extend({
  defaults: {
    username: ''
  },
  url: 'http://www.mocky.io/v2/56261127250000a01accb34f',
  initialize: function(){
    this.games = new Games();
    this.listenTo( this, "sync", this.initGames );
    this.fetch();
  },
  initGames: function(){
    this.games.add( this.get('games') );
    this.trigger('ready', this);
  }
});

var PlayerView = Backbone.View.extend({
  template: _.template('<h1><%=username%></h1> and his games: <ol class="games"></ol>'),
  render: function(){
    this.$el.html( this.template( this.model.toJSON() ) );
    this.model.games.each( this.renderGame, this );
    return this;
  },
  renderGame: function(game, i){
    var gameView = new GameView({ model: game });
    gameView.render().$el.appendTo( this.$('.games') );
  }
});

var GameView = Backbone.View.extend({
  tagName: 'li',
  template: _.template('<strong>Game:</strong> <%=title%>'),
  render: function(){
    this.$el.html( this.template( this.model.toJSON() ));
    return this;
  }
});


var dude = new Player();
dude.on('ready', function(player){
  var playerView = new PlayerView({ model: player });
  playerView.render().$el.appendTo( document.body );
});

<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

这篇关于Backbone.js的取（）JSON模型得到（）returnes不确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！