[英]Why is my view in backbone not rendering?
I am trying to render this template from my backbone views but it is not working? 我正在尝试从我的主干视图呈现此模板,但是它不起作用? Anyone know what I am doing wrong here thanks!
任何人都知道我在这里做错了,谢谢! I will include my jade file for the views and the main.js file for the backbone js script.
我将包括用于视图的jade文件和用于主干js脚本的main.js文件。
Jade File 玉锉
extends layout
block content
div.centerContent
script(type="text/javascript", src="/js/main.js")
h4 User goes here with equal before it no space
div#user
p #{firstName} #{lastName}
p #{email}
p #{phone}
p #{birthday}
button.edit Edit
script(id="userTemplate", type ="text/template")
p #{firstName} #{lastName}
p #{email}
p #{phone}
p #{birthday}
button.edit Edit
script(id="userEditTemplate", type ="text/template")
div
form(action="#")
input(type="text", class="firstName", value=#{firstName}) input(type="text", class="lastName", value=#{lastName})
input(type="email", class="email", value=#{email})
input(type="number", class="phone", value=#{phone})
input(type="date", class="birthday", value=#{birthday})
button.save Save
button.cancel Cancel
hr
Main.Js file Main.Js文件
(function () {
window.App = {
Models: {},
Collections: {},
Views: {},
Templates: {},
Router: {}
};
// MODEL
App.Models.User = Backbone.Model.extend({
defaults: {
firstName: 'first',
lastName: 'last',
email: 'Email',
phone: '222',
birthday: 'date'
},
validate: function (attrs) {
if (!attrs.firstName) {
return 'You must enter a real first name.';
}
if (!attrs.lastName) {
return 'You must enter a real last name.';
}
if (attrs.email.length < 5) {
return 'You must enter a real email.';
}
if (attrs.phone.length < 10 && attrs.phone === int) {
return 'You must enter a real phone number, if you did please remove the dash and spaces.';
}
if (attrs.city.length < 2) {
return 'You must enter a real city.';
}
},
initialize: function() {
user.on('invalid', function (model, invalid) {
console.log(invalid);
});
}
});
//VIEW
App.Views.User = Backbone.View.extend({
model: App.Models.User,
//tagName: 'div',
//id: 'user',
//className: 'userProfile',
template: _.template($("#userTemplate").html());
editTemplate: _.template($("#userEditTemplate").html());
initialize: function (){
}
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
events: {
'click button.edit': 'editProfile',
// 'click button.save': 'saveEdits',
'click button.cancel': 'cancelEdits'
},
editProfile: function () {
this.$el.html(this.editTemplate(this.model.toJSON()));
},
cancelEdits: function() {
this.render();
}
});
//start history service
Backbone.history.start();
var user = new App.Views.User({el: 'div #user'});
user.render();
})();
I found that you didn't assign backbone view a model. 我发现您没有分配骨干视图模型。
So you could try this: 因此,您可以尝试以下操作:
var MyModel = Backbone.Model.extend({
defaults: {
name: 'first',
lastName: 'last',
email: 'Email',
phone: '222',
birthday: 'date'
}
});
var MyView = Backbone.View.extend({
el: "#user",
model: MyModel,
template: _.template($("#test-template").html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var myView = new MyView({model:new MyModel()});
myView.render();
And test-template is: 测试模板是:
<script id="test-template" type="text/template">
<div><%=name%></div>
</script>
HTML: HTML:
<body>
<div id="user">
</div>
</body>
You can define backbone view's el attribute in Backbone view declaration. 您可以在Backbone视图声明中定义主干视图的el属性。 And remember to assign view a model when you initiate it.
并记住在启动模型时分配视图模型。
[EDIT] [编辑]
JADE: 玉:
script(id="userTemplate", type ="text/template")
p #{firstName} #{lastName}
p #{email}
p #{phone}
p #{birthday}
button.edit Edit
Modify template generation method: 修改模板生成方式:
<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script>
template: jade.compile($("#userTemplate").text());
Hope this is helpful for you. 希望这对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.