2012-01-31 39 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文件。至少,这是什么固定它,我:)

相关问题