2012-01-31 70 views
2

模板代碼當我做一個模板,我得到這個

<script type="text/template" id="test-template"> 
    <section> 

     <form id="<%= pid %>"> 
      <div class="row"> 
       <div class="span16"> 
        <p> 
         <input type="radio" checked name="text-align" id="" value="tal" /> 
         <span>標題靠左</span> 
         <input type="radio" name="text-align" id="" value="tac" /> 
         <span>標題居中</span> 
         <input type="radio" name="text-align" id="" value="tar" /> 
         <span>標題靠右</span> 
        </p> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="span16"> 
        <p><input type="text" name="title" class="span10" placeholder="標題" value="<%= title %>" /></p> 
        <p><textarea name="content" class="span14" placeholder="內容" rows="10"><%= content %></textarea></p> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="span8"> 
        <p><input type="text" name="data-x" placeholder="X 軸" value="<%= data_x %>" /></p> 
        <p><input type="text" name="data-y" placeholder="Y 軸" value="<%= data_y %>" /></p> 
        <p><input type="text" name="data-z" placeholder="Z 軸" value="<%= data_z %>" /></p> 
       </div> 

       <div class="span8"> 
        <p><input type="text" name="data-rotate-x" placeholder="X 軸旋轉" value="<%= data_rotate_x %>" /></p> 
        <p><input type="text" name="data-rotate-y" placeholder="Y 軸旋轉" value="<%= data_rotate_y %>" /></p> 
        <p><input type="text" name="data-rotate-z" placeholder="Z 軸旋轉" value="<%= data_rotate_z %>" /></p> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="span8"> 
        <p><input type="text" name="data-scale" placeholder="縮放" value="<%= data_scale %>" /></p> 
       </div> 

       <div class="span8"> 
        <p><input type="text" name="data-rotate" placeholder="旋轉" value="<%= data_rotate %>" /></p> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="span16"> 
        <input type="hidden" value="<%= title_align %>" /> 
        <input type="submit" class="btn" value="提交" /> 
       </div> 
      </div> 
     </form> 
    </section> 
</script> 

(function($) { 
window.Step = Backbone.Model.extend({}); 

window.Steps = Backbone.Collection.extend({ 
    model: Step, 
    url: MyAjax.ajaxurl + "?action=query-homepage-step", 
     initialize: function() { 
     this.fetch(); 
     } 
}); 

window.StepListView = Backbone.View.extend({ 
    el: $('#steplist'), 
    initialize: function() { 
     this.model.bind("reset", this.render, this); 
    }, 
    render: function(eventName) { 
     _.each(this.model.models, function(step) { 
      $(this.el).append(new StepView({ model: step }).render().el); 
     }, this); 
     return this; 
    } 
}); 

window.StepView = Backbone.View.extend({ 

    template: _.template($('#test-template').html()), 
    initialize: function() { 
     this.model.bind('change', this.render, this); 
    }, 

    render: function(eventName) { 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

window. AppRouter = Backbone.Router.extend({ 
    routes: { 
     "": "init" 
    }, 

    init: function() { 
     console.log('init'); 
     this.steps = new Steps(); 
     this.stepView = new StepView({ model: this.steps }); 
     this.steps.fetch(); 
    } 
}); 
})(jQuery); 

「無法調用空的‘替換’」這有什麼錯呢? 我已經在頁面中創建了一個名爲$('#test-template')的模板並正確傳遞了所有<%= var %>

Uncaught TypeError: Cannot call method 'replace' of null 
b.templateunderscore-min.js:28 
(anonymous function)stepmakerapp.js:27 
(anonymous function) 

沙盒是這裏http://zhanghong.sinaapp.com/make-homepage

回答

1

更改包括文件從頭部到身體......一些事情,如下面,

<body> 
<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="lib/underscore-min.js" type="text/javascript"></script> 
<script src="lib/backbone-min.js" type="text/javascript"></script> 
</body> 

這對我的作品。

+0

好ISEE,我應該包括骨幹之前的jQuery – crapthings 2012-04-11 04:12:57

1

更具體地@Sats的回答,您需要定義模板之前,加載所有其他的JS文件。至少,這是什麼固定它,我:)

相關問題