我正在使用以下代码来创建视图:
LoginForm = Backbone.View.extend({
tagName :"form"
,id : "login-form"
,className :"navbar-form"
,initialize: function () {
this.model = new StackMob.User();
this.render();
}
,render: function () {
$(this.el).html(this.template());
return this;
}
,events : {
"change" : "change"
,"submit #login-form" : "login"
}
,login : function( event) {
event.preventDefault();
var self = this;
this.model.login(true, {
success: function( model) {
app.alertSuccess( "User logged in");
self.render();
}
,error: function( model, response) {
app.alertError("Could not login user: " + response.error_description);
}
});
event.currentTarget.checkValidity();
return false;
} …我正在使用Backbone.js学习JavaScript MVC应用程序开发,并且在视图中渲染模型集合时遇到问题.这就是我想要做的事情:
页面完成加载后,从服务器检索数据作为模型集合
在视图中渲染它们
这就是我想做的一切,这就是我到目前为止所做的一切:
$(function(){
"use strict";
var PostModel = Backbone.Model.extend({});
var PostCollection = Backbone.Collection.extend({
model: PostModel,
url: 'post_action.php'
});
var PostView = Backbone.View.extend({
el: "#posts-editor",
initialize: function(){
this.template = _.template($("#ptpl").html());
this.collection.fetch({data:{fetch:true, type:"post", page:1}});
this.collection.bind('reset', this.render, this);
},
render: function(){
var renderedContent = this.collection.toJSON();
console.log(renderedContent);
$(this.el).html(renderedContent);
return this;
}
});
var postList = new PostCollection();
postList.reset();
var postView = new PostView({
collection: postList
});
});
据我所知,Chrome正在记录来自服务器的响应,并且它是JSON格式,就像我想要的那样.但它并没有在我看来呈现.控制台中没有明显的错误.
服务器有一个处理程序,它接受GET参数并回显一些JSON:
http://localhost/blog/post_action.php?fetch=true&type=post&page=1
[
{
"username":"admin",
"id":"2",
"title":"Second",
"commentable":"0",
"body":"This is the second …这是我改变路线的基本骨干视图.我想获得点击链接的href属性.怎么做？这是一个代码:
var Menu = Backbone.View.extend({
el: '.nav',
events: {
'click a' : 'changeRoute'
},
changeRoute: function(e) {
e.preventDefault();
//var href = $(this).attr("href");
router.navigate(href, true);
}
});
我是骨干的新手,所以请怜悯:)
我正在学习Backbone.js,并试图弄清楚是否可以在Backbone视图中使用实例变量.
我的目标是在实例化视图时从外部文件加载视图的模板.目前我将它们存储在Backbone应用程序的全局命名空间中的全局变量中,但将模板存储在视图的实例变量中会更清晰.目前我的设置如下:
var templates = {};
MessageView = Backbone.View.extend({
initialize: function() {
$.get('js/Test2Templates.tpl', function(doc) {
var tmpls = $(doc).filter('template');
templates['MessageView'] = [];
tmpls.each(function() {
templates.MessageView[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));
});
});
},
render: function() {
var tpldata = {name: 'Ville', thing: 'Finland'};
$('#display').jqoteapp(templates.MessageView.greeting_template, tpldata);
},
events: {
"click input[type=button]": "additionalTransactions"
},
additionalTransactions: function() {
this.render();
}
});
但是我没有使用"模板"定义为全局变量,而是想在视图的初始化函数中创建"模板",这些行(但这不起作用):
MessageView = Backbone.View.extend({
view_templates: {},
initialize: function() {
$.get('js/Test2Templates.tpl', function(doc) {
var tmpls = $(doc).filter('template');
tmpls.each(function() {
this.view_templates[this.id] = $.jqotec($.unescapeHTML(this.innerHTML));
});
});
},
render: …我正在尝试使用以下代码创建一个简单的backbone.js视图:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<!--<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
var BodyView = Backbone.View.extend({
el:$('body'),
initialize : function() {
console.log("view init");
}
});
new BodyView();
</script>
</body>
</html>
但
我得到一个错误期望在instanceof检查中的函数,但得到[对象对象]
在这条线上 - new BodyView();
如果我使用较旧版本的backbone.js(0.3.3),此代码正常工作
知道为什么会发生这种错误以及如何解决它吗？.提前谢谢.
PS - 我一直主要关注http://backbonetutorials.com/what-is-a-view/和http://documentcloud.github.com/backbone/#View创建这个示例骨干js应用程序.
我正在尝试从本地API填充我的Backbone集合并更改视图以显示数据.我的集合中的fetch()调用似乎成功了,并且抓取了数据,但是fetch操作不会更新集合中的模型.
这就是我的模型和收藏品:
var Book = Backbone.Model.extend();
var BookList = Backbone.Collection.extend({
model: Book,
url: 'http://local5/api/books',
initialize: function(){
this.fetch({
success: this.fetchSuccess,
error: this.fetchError
});
},
fetchSuccess: function (collection, response) {
console.log('Collection fetch success', response);
console.log('Collection models: ', this.models);
},
fetchError: function (collection, response) {
throw new Error("Books fetch error");
}
});
我已经完成了这样的观点:
var BookView = Backbone.View.extend({
tagname: 'li',
initialize: function(){
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function(){
this.$el.html(this.model.get('author') + ': ' + this.model.get('title'));
return this;
}
});
var BookListView = Backbone.View.extend({
el: …我有一组模型,我希望在表格视图中呈现.每个模型应该由表中的单个行表示,并且该行应该使用模板生成.我应该能够将事件处理程序附加到该行(例如单击),在事件警报时,可以提供有关与该行关联的模型的一些特定信息.
我看到类似事情的常见方法是将每一行分解为它自己的视图,并且有一个父视图(在本例中可以说是表格)使用行视图来生成要包含在代码中的html .但是,我无法弄清楚它如何与模板一起使用.
在这种情况下,我无法将事件专门附加到RowView,因为它没有引用dom元素(this.el对于主干),它只返回一个字符串.如何使用模板获得最大容量,我怎样才能达到我的目的？
问题不是关于事件,模板或使用嵌套视图,而是关于使用Backbone实现这种输出的正确方法.
示例代码(也在小提琴中):
/** View representing a table */
var TableView = Backbone.View.extend({
tagName: 'table',
render: function() {
var rows = _.map(this.collection.models, function(p) {
return new RowView({model: p}).render();
});
$('body').html(this.$el.html(rows.join('')));
}
});
/** View representing a row of that table */
var RowView = Backbone.View.extend({
render: function() {
// imagine this is going through a template, but for now
// lets just return straight html.
return '<tr>' +
'<td>' + this.model.get('name') + '</td>' …假设我有两个视图(paginationview和postsview)和一个集合(postscollection).每当在分页视图中单击.next按钮时,我调用postscollection中的下一个函数,post集合从服务器获取新页面的帖子(代码被简化).现在在我的帖子视图中,我只想显示最后一页中的帖子.我不想将我的视图绑定到集合中的"add"事件,因为有更多的情况会将某些内容"添加"到集合中.我希望我的postsview中的'renderlist'功能只在我的postscollection中调用'nextPage'函数时被调用.如何将这些功能连接在一起？
//分页视图
var PaginationView = Backbone.View.extend({
events:{
'click a.next' : 'next',
},
next: function() {
this.collection.nextPage();
return false;
}
});
//集合
var PostsCollection = Backbone.Collection.extend({
model: model,
initialize: function() {
_.bindAll(this, 'parse', 'url', 'pageInfo', 'nextPage', 'previousPage');
this.page = 1;
this.fetch();
},
parse: function(response) {
console.log(response);
this.page = response.page;
this.perPage = response.perPage;
this.total = response.total;
this.noofpages =response.noofpages;
return response.posts;
},
url: function() {
return '/tweet/' + '?' + $.param({page: this.page});
},
nextPage: function() {
console.log("next page is called");
this.page = this.page …当我想从路由器类初始化视图时,我收到此错误.
错误是:未捕获TypeError:对象#没有方法'_ensureElement'
BlogFormView:
App.BlogFormView = Backbone.View.extend({
el: ".data-form",
initialize: function(){
this.template = _.template($("#blog_form_template").html());
this.render();
},
render: function(){
this.$el.html(this.template({blog: this.model.toJSON()}));
return this;
},
events: {
"click .submit-blog" : "submitForm"
},
submitForm: function(ev){
}
});
路由器:
var blog = new App.Blog();
var blogFormView = App.BlogFormView({model: blog});
我对Backbone相对较新,我遇到了这个问题.
我正在使用Backbone和DustJS
我的模板看起来像这样 - index.dust
<div id="parentView">
<div class="section">
{>"app/inc/responseMessage" /}
<div class="userDetails">
{! A button to get user details !}
</div>
</div>
</div>
这是我的部分 - responseMessage.dust
<div id="responseMessage">
{@eq key="{data.success}" value="true"}
<div class="alert alert-success success" role="alert">success</div>
{/eq}
</div>
我的JS看起来像这样
initialize: function() {
this.responseMessageView = this.responseMessageView ||
new ResponseMessageView({
model: new Backbone.Model()
}); // View is for the partial
this.model = this.model || new Backbone.Model(); //View for the whole page
},
当事件发生时调用下面的函数,它执行POST并成功返回.
primaryViewEventTrigger: function(event){
//Button click on `index.dust` triggers this …