Backbone.js从响应呈现数据

好吧，首先，我是Backbone.js用户的新手，我正在使用我在网上find的文档和示例的帮助来玩它。 我设法configuration上面的node.js和问题困扰我现在我觉得纯粹是缺乏我的Backbone知识，解决scheme是我希望很简单。 我在几个文档中划分了Backbone ，并且在Require.js帮助下一起工作：

 RecipeSearch.js router.js models(folder) ¬ recipe_collection_m.js recipe_m.js views(folder) ¬ search_v.js templates(folder) ¬ search_t.html 

RecipeSearch.js只是激发一切：

 define(["router"],function(router) { var initialize = function(hash) { if(!hash){ window.location.hash = 'search'; }else{ window.location.hash = hash; } Backbone.history.start(); }; return { initialize: initialize }; }); 

router.js是我处理路线的地方：

 define(["views/search_v","models/recipe_collection_m"] ,function(searchView, recipeCollection){ var RecipeSearchSpace = Backbone.Router.extend({ currentView: null, routes: { "search": "search", // #search "search/:query": "search" // #search/kiwis }, changeView: function(view) { this.currentView = view; this.currentView.render(); }, search: function(query) { if(query){ var RecipeCollection = new recipeCollection(); RecipeCollection.url = '/search/'+query; RecipeCollection.fetch({ success: function(response,xhr) { console.log("Inside success:"); console.log(response); }, error: function (errorResponse) { console.log("Inside error:"); console.log(errorResponse); } }); this.changeView(new searchView({ collection: RecipeCollection })); } else{ this.changeView(new searchView()); } } }); return new RecipeSearchSpace(); }); 

在模型文件夹中设置模型和集合，

recipe_collection_m.js：

 define(['models/recipe_m'], function(Search) { var searchCollection = Backbone.Collection.extend({ model: Search }); return searchCollection; }); 

recipe_m.js：

 define(function(require) { var Search = Backbone.Model.extend({ defaults:{ recipe:"no results" } }); return Search; }); 

最后查看叫做recipe_v.js：

 define(['text!templates/search_t.html','models/recipe_collection_m'], function(SearchTemplate, RecipeCollection){ var searchView = Backbone.View.extend({ el:$(".content"), events:{ 'click button#search':'send_query' }, initialize: function(){ _.bindAll(this, 'render','send_query'); this.collection = new RecipeCollection(); this.render(); }, render: function(){ this.$el.html(SearchTemplate); $('.search_form').append("<button id='search'>Find</button>"); $(this.el).append("<ul class='recipes_list'></ul>"); }, send_query:function(){ $(".search_form").submit(function(e){ e.preventDefault(); }); var value = $(".wanted").val(); window.location.hash = '#search/'+ value; } }); return searchView; }); 

最后是search_t.html，模板：

 <p class="text">test search</p> <form class="search_form"> <input class="wanted" type="text"/> </form> 

我的问题是，我不知道如何正确呈现从服务器到search_v.js（SearchTemplate）的响应。 下一个案子是：

当我打我的testing服务器的根

• 应用程序将我redirect到/＃search标签成功，

  • 那么SearchTemplate会随着生成button Find和列出<ul>并在列表中呈现。
  • 我插入值（可以说我在“ 例子 ”中.wantedinput，并点击button#search ， send_query函数成功激发
  • 浏览器中的url成功更改为localhost：3000 /＃search / example
  • 我在Chrome Developer tools检查Network选项卡，并有服务器响应调用Example成功接收
  • 当我检查Console我得到： 内部成功：s {长度：6，模型：数组[6]，_byId：对象，URL：“/search/ example ”，构造函数：函数…}
  • 我猜这意味着它正确地提取RecipeCollection

这里是我的死亡，现在我想呈现给SearchView ，我试图通过收集它：

 this.changeView(new searchView({ collection: RecipeCollection })); 

我不太确定我是否有这个集合，如果它发送这样的查看，如何在那里调用，例如渲染到<ul> ？

Answer 1

尝试这个 ：

  search: function (query) { var self = this; if (query) { var RecipeCollection = new recipeCollection(); RecipeCollection.url = '/search/' + query; RecipeCollection.fetch({ success: function (response, xhr) { console.log("Inside success:"); console.log(response); self.changeView(new searchView({ collection: response })) }, error: function (errorResponse) { console.log("Inside error:"); console.log(errorResponse); } }); } else { this.changeView(new searchView()); } }