2013-12-18 60 views
0
<script id="index-recipe" type="text/x-handlebars-template"> 
     <h2>{{name}}</h2> 
    </script> 
    <script type="text/javascript"> 
     var MyNamespace = { Views: {}}; 

     $(document).ready(function() { 
      var template = Handlebars.compile($("#entry-template").html()); 
      var templateRecipe = Handlebars.compile($("#index-recipe").html()); 

      var recipes = [name = "Chicken Chilly", name = "Chicken Manchurian"]; 

      MyNamespace.MyTagView = Backbone.View.extend({ 
       template: templateRecipe, 
       initialize: function() { 
        this.render(); 
       }, 
       render: function() { 
        this.$el.html(this.template(this)); 
        var ViewRecipes = new MyNamespace.Recipes({ collection: recipes }); 
        this.$el.append(ViewRecipes.render().el); 
        return this; 
       } 

      }); 


      MyNamespace.Recipes = Backbone.View.extend({ 
       render: function() { 
        this.collection.forEach(function (recipe) { 
         var ViewRecipe = new Backbone.Recipe({ model: recipe }); 
         this.$el.append(ViewRecipe.render().el); 
        }, this) 
        return this; 
       } 
      }); 

      MyNamespace.Recipe = Backbone.View.extend({ 
       render: function() { 
        this.$el.text("I am Recipe"); 
        return this; 
       } 
      }); 

      var View = new MyNamespace.MyTagView(); 
      $("#content").html(View.el); 
     }); 


    </script> 

回答

0

編輯終於搞定了。 (請參閱下面的鏈接。)

  1. Recipe應該是擁有「入口模板」的那個。它應該使用該模板及其模型進行渲染。
  2. 將一個實際的Backbone.Model實例傳遞給Recipe視圖,並將一個Backbone.Collection實例傳遞給Recipes視圖。

有一個錯字Backbone.Recipe,這當然是不存在的。

var ViewRecipe = new MyNamespace.Recipe({ model: recipe }); 

此外,您發佈的內容中沒有「#entry-template」的模板定義。

Here's a working example.

相關問題