Question

我是Backbone.js的新手，我正在尝试创建一个可以检查您是否完成了您控制的视频游戏的应用程序。

我正在使用API来检索有关视频游戏的任何信息。

我希望能够搜索游戏，例如“Zelda”。然后它应列出每个塞尔达游戏。

我卡住了，因为我不知道如何让搜索功能与API一起正常工作，我不知道如何正确渲染它。我已经为应该渲染的游戏编写了一个模板。

我不知道该怎么做，或者我是否走在正确的轨道上。我并不是要求某人完全编码，我要求朝着正确的方向迈出一步。

如果您需要更多代码，请与我们联系。

library_view.js

var LibraryView = Backbone.View.extend({
  el:$("#games"),
  url: url = "http://www.giantbomb.com/api/search/?api_key=[KEY]",
  events:{
    "keypress input":"findGames"
  },

  findGames:function(e){
  if(e.which == 13){
    query = $(".searchfield").val()
    field_list = "name,platforms"
    resources = "game"
    url = url +"&query="+ query +"field_list"+ field_list +"resources"+ resources
  }
},

的index.html

<input type="search" placeholder="Find a game" class="searchfield">

Answer 1

看起来你正在将视图和模型混合在一起例如，视图中不应包含URL，它不知道如何处理它。

正确的道路大致如此：

var SearchModel = Backbone.Model.extend();

var LibraryView = Backbone.View.extend({
  el: $("#games"),

  events:{
    "keypress input":"findGames"
  },

  findGames: function(e){
    // get query, field_list, resources
    var searchModel = new SearchModel()
    searchModel.fetch({
      url: "http://www.giantbomb.com/api/search/?api_key=[KEY]"+"&query="+ query +"field_list"+ field_list +"resources"+ resources
    });
    // do something with searchModel 
  }
});

获取后，searchModel将保存数据Backbone Model样式。假设来自AJAX调用的返回值是：

{
  "answer": 42
}

然后：

searchModel.get("answer") // = 42

SearchModel只是一个抽象，因为你并不真正需要它（你可以只是ajax）。但我把它用来帮助你理解Model代表什么，它基本上只代表数据......它不知道View是什么。

在使用Backbone.js的搜索功能后，从API渲染结果

library_view.js

的index.html

1 个答案: