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
好ISEE,我應該包括骨幹之前的jQuery – crapthings 2012-04-11 04:12:57