Backbone.js渲染來自響應的數據

Question

好的，首先，我是Backbone.js的新手，我在網上找到的文檔和示例的幫助下正在玩它。我已經設法將它配置在node.js以上，並且現在困擾我的問題我認爲純粹是缺乏我的Backbone知識，解決方案是我希望非常簡單。 我在幾個文件分割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）的響應。此案是下一個：

當我打我的測試服務器的根

• 應用重定向我成功/＃搜索標籤，

  • 那裏SearchTemplate successully呈現隨着genereted button Find並在列表中看到名爲<ul>的電話recipes_list。
  • 我插入值（可以說，我在「例如」類型）在.wanted輸入和點擊按鈕#search，成功的send_query功能火災
  • 網址在瀏覽器更改爲本地主機：3000 /＃搜索/ example成功
  • 我火Developer tools在Chrome檢查Network選項卡，並有一個名爲Example服務器響應成功接收
  • ，當我檢查Console我： Inside success： s {length：6，models：Array [6]，_byId：Object，url：「/ search/example」，constructor：function ...}
  • 我想這意味着它會正確提取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()); 
    } 
}