基本上我需要的是做这样的事情
App.CommentView = Backbone.View.extend({
className: function() {
if (this.model.get('parent_id')) {
return 'comment comment-reply';
} else {
return 'comment';
}
},
问题是,传递给的函数className是在视图模板的html的上下文中执行的,所以我无法调用this.model.
有没有什么办法可以在渲染过程中访问模型？或者我是否需要稍后设置该类,例如在render函数中？
我正在使用Backbone构建一个表单,并希望在"模糊"事件中验证其字段.
连接到事件很容易,但我很好奇的是模型是否应该在模糊时更新或仅在表单提交时更新？
在模糊上更新模型
model.set({...}, {validate:true});在提交时更新模型
model.set()用于验证,因此模型需要暴露一些验证方法(例如MyModel.validZip())set()需要调用以更新模型,这将导致验证再次发生(不完全确定这是坏事)我已经通过了几个有关骨干GitHub的问题(读1,2,3)和骨干开发者似乎得出一个模型和形式之间的线路.
此外,Backbone.Form插件似乎保留内部fields属性以跟踪表单字段,完成后,调用.commit()以更新模型.
因此,似乎在提交时更新模型是更好的方法.那是你的体验吗？
我需要创建一个基本视图,我的所有视图都将扩展.我不确定在何时何地宣布这个观点.
基本上,我需要注入global variables我的所有模板,而不是在每个render()方法中都这样做.
这是我现在的树形结构:
|-main.js
|-app.js
|-require.js
|-App
| |-View
| | |-Dashboard.js
| | |-Header.js
| | |-Content.js
| |-Model
| |-Collection
| |-Template
|
|-Libs
|-...
这是我的app.js
var App = {
ApiURL: "http://domain.local",
View: {},
Model: {},
Collection: {},
Registry: {},
Router: null
};
define(['backbone', 'View/Dashboard'], function(Backbone){
var AppRouter = Backbone.Router.extend({
routes : {
"dashboard": "index",
},
index: function() {
console.log('routing index route...');
var x = new App.View.Dashboard({el:$('#main-content'), type:'other'});
}
});
var initialize = …我目前正在尝试使用新的WordPress 3.5媒体管理器,它使用backbone.js来创建和填充其模态窗口.
我想要做的是:用户点击上传按钮,媒体管理器弹出,用户选择图像,印刷机插入,然后图像被保存到自定义字段.
所有这些都已经有效,我唯一想改变的是用我自己的模板填充媒体上传者的边栏(用户可以添加标题,标题,选择大小等).
我已经阅读了很多关于如何使用骨干的教程,但现在有点卡住了.这是我到目前为止的一些代码:
//defined earlier:
var frame;
//on click:
if ( file_frame )
{
file_frame.open();
return;
}
else
{
// Create the media frame.
file_frame = wp.media(
{
frame: 'select',
state: 'mystate',
library: {type: 'image'},
multiple: false
});
file_frame.states.add([
new media.controller.Library({
id: 'mystate',
title: 'my title',
priority: 20,
toolbar: 'select',
filterable: 'uploaded',
library: media.query( file_frame.options.library ),
multiple: file_frame.options.multiple ? 'reset' : false,
editable: true,
displayUserSettings: false,
displaySettings: true,
allowLocalEdits: true,
//AttachmentView: ?
}),
]);
file_frame.open();
}
我也尝试过注册我自己的模板:
media.view.Attachment.mySidebar …我有一个带有区域的布局视图,在该区域中我有一个触发事件的项目视图,但它似乎没有冒泡到布局视图.我做错了什么还是这个设计行为？我假设没有添加itemview前缀,因为父视图不是集合视图？无论哪种方式,事件都不会冒泡到布局视图.
layoutView = Marionette.Layout.extend({
template: "#layout-template",
regions: {
titleRegion: "#job-title-region"
},
triggers: {
"save:clicked" : "onSaveClicked"
},
onSaveClicked: function (args) {
alert('Clicked');
}
});
childview = Marionette.ItemView.extend({
template: "#child-template",
triggers: {
"click .js-save": "save:clicked"
}
});
更新:
看到这个小提琴http://jsfiddle.net/7ATMz/11/我设法得到布局视图来监听子事件但我必须在布局视图本身之外连接并打破封装.无论如何我可以在布局视图中执行此操作吗？
谢谢,
乔恩
我正在声明一个这样的视图:
var VirtualFileSelectorView = Backbone.View.extend({
selected: function() {
console.log("selected function");
},
initialize: function() {
// Shorthand for the application namespace
var app = brickpile.app;
// bind to the selected event
app.bind('selected', this.selected, this);
}
});
然后我实例化了这个View的两个实例,你可以在这里看到:http://cl.ly/H5WI
问题是当选择的事件被触发时,所选的功能被调用两次？
我知道在页面中多次使用相同的id会产生格式错误的HTML.使用jquery选择器时,只返回带有id的第一个元素,但在我的应用程序中,我不应该遇到这个问题.
我有项目列表视图,它们都有我需要引用的元素.由于每个项目只能访问自己$el传入的id选择器,因此不会产生任何冲突(即使页面上有多个).
我模拟了我的小提琴意味着这里
在这个项目中,我没有进行任何页面广泛的解析,所以我认为它应该是安全的.我有什么理由不这样做吗？
我到处寻找答案,但对我发现的东西不满意.
问题是,我正在从Addy Osmani做一个教程,在Backbone中制作一个'Todo'应用程序,但当我看到控制台时,我得到一个错误说this.model is undefined.
我甚至试过这个SO回答Backbone模型错误显示在控制台中,但我仍然得到相同的错误.请告诉我有什么问题.
顺便说一句,什么是this.model或this.collection？我有一个想法,他们参考Backbone.Model,Backbone.Collection但他们如何工作？我问这是因为在另一个教程this.collection和this.model.models也是不确定的,当我明确的Model和Collection.
非常感谢
JS:
//Model
var Todo = Backbone.Model.extend({
defaults: {
title: 'Enter title here',
completed: true
},
validate: function(attrs) {
if (attrs.title === undefined) {
return 'Remember to enter a title';
}
},
initialize: function() {
console.log('This model has been initialized');
this.on('change:title', function() {
console.log('-Title values for this model have changed');
});
this.on('invalid', function(model, …我正在使用一个复合视图,其中$ .dialog调用了它的$ el.
然后,合成视图将列出集合中的项目.
现在我已经尝试了多种方式来渲染集合项:从复合视图外部获取它,然后将其附加到视图中,在视图内部获取,从我的服务器脚本预加载集合等等...
一切似乎都有效,但同样的问题发生..
一旦复合视图看到这个集合,它就会再次调用它自己的初始化函数......
我完全理解渲染函数将在集合重置或添加时调用...但是初始化??? 我完全不知道为什么会这样.
showCustomFieldSelect: function(e){
log('triggered');
e.preventDefault();
var cl = new AustApp.Collections.CustomField;
var select = new AustApp.Views.AvailableCustomFieldsList({
el: "#available-custom-fields-popup",
collection: cl
});
cl.fetch();
cl.once("reset", function(){
// this bind was
// previously used for creating the view
// or calling render functions directly
// amongst numerous efforts to debug
}, this);
},
MyApp.Views.AvailableCustomFieldsList = function(){
var AvailableCustomFieldsList = Backbone.Marionette.CompositeView.extend({
template: "#available-contact-list-custom-field-list-js",
tag: "div",
itemView: AustApp.Views.AvailableCustomFieldsListItem,
emptyView: AustApp.Views.EmptyAvailableCustomFieldsListItem,
itemViewContainer: "ul",
templateHelpers: viewHelpers,
initialize: function(){
log('init called'); …我有一个骨干视图,看起来像这样:
var myView = Backbone.view.extend({
events: {'click .myClass': 'myFunction'},
initialze: //initialize function,
render: //render function,
myFunction: function (e) {
//do something
}
});
我想myFunction只做一次工作,然后停止被叫.我相信我可以使用主干once()方法来实现这一点,但无法弄明白.这是最好的方式,我该如何构建它？谢谢!
backbone-views ×10
backbone.js ×10
javascript ×4
marionette ×3
extends ×1
html ×1
html-parsing ×1
jquery ×1
validation ×1
wordpress ×1