Backbone.js为web应用程序提供了结构通过提供模型通过键值绑定和自定义事件,收藏具有丰富的可枚举函数API,意见使用声明性事件处理,并将其全部连接到基于RESTful JSON接口的现有API。
该项目是托管在GitHub上,和带注释的源代码可用,以及在线测试套件,一个示例应用程序,一教程列表和a一长串真实世界的项目使用Backbone的。主干可用于麻省理工学院软件许可.
您可以在GitHub问题页面,或将页面添加到维基.
主干是的开源组件文档云.
下载和依赖项(右键单击并使用“另存为”)
Backbone唯一的硬依赖是下划线.js ( >= 1.8.3).用于RESTful持久性和DOM操作骨干。查看,包括jQuery(jQuery)( >= 1.11.0).(模仿Undercore和jQuery API,例如洛达什和仄普托,将也可以工作,具有不同程度的兼容性。)
入门
在处理涉及大量JavaScript的web应用程序时首先要学习的是停止将数据绑定到DOM。就这些了创建JavaScript应用程序太容易了,最终会成为一堆乱七八糟的jQuery选择器和回调,都在疯狂地试图将数据保存在HTML UI、JavaScript逻辑和数据库之间的同步服务器。对于富客户端应用程序,一种更结构化的方法通常是有帮助的。
使用Backbone,可以将数据表示为模型,可以创建、验证、销毁,并保存到服务器。每当UI操作导致的属性要更改的模型,该模型将触发“更改”事件;全部的这个意见可以通知显示模型状态的改变,使他们能够做出相应的反应,重新评价自己新信息。在一个已完成的Backbone应用程序中,你不必编写胶水查找DOM以查找具有特定元素的代码身份证件,并手动更新HTML-当模型更改时,视图只会自我更新。
从哲学上讲,Backbone试图发现最小集数据结构(模型和集合)和用户界面(视图和URL)原语,在使用JavaScript。在一个主宰一切的生态系统中框架很常见,许多库都要求您的站点重组以适应其外观、感觉和默认行为-主干应继续成为一种工具,为您提供自由设计完整的您的web应用程序的体验。
如果你是新来的,还不太确定Backbone的用途,那么从以下开始浏览基于后端的项目列表.
本文档中的许多代码示例都是可运行的,因为本页包含主干。单击玩按钮执行它们。
模型和视图
Backbone能帮你做的最重要的一件事就是您的业务逻辑与用户界面是分开的。当两个人纠结,改变是艰难的;当逻辑不依赖于UI时界面变得更易于使用。
模型
- 协调数据和业务逻辑。
- 从服务器加载和保存数据。
- 数据更改时发出事件。
查看
- 侦听更改并呈现UI。
- 处理用户输入和交互。
- 将捕获的输入发送到模型。
A类模型管理数据属性的内部表,以及触发器“更改”修改其任何数据时发生的事件。模型使用持久层(通常是REST API)处理同步数据带有支持数据库。将模型设计为原子可重用对象包含所有有助于操作其特定功能的函数位数据。模型应该能够在你的应用程序中传递,并在任何需要数据的地方使用。
A类查看是用户界面的原子块。它通常会呈现来自特定模型的数据,或多个模型的数据-但视图可以也是独立的无数据UI块。模型通常应该不知道视图。相反,意见听取模型“更改”事件,并作出反应或重新解读自己适当地。
收藏
A类收藏帮助您处理一组相关的模型,处理将新模型加载和保存到服务器并提供帮助程序针对模型列表执行聚合或计算的函数。除了自己的事件外,集合还代理所有模型中发生的事件,允许您在一个位置进行监听对于集合中任何模型可能发生的任何更改。
API集成
主干已预先配置为与RESTful API同步。只需创建一个带有的新集合网址资源端点的:
var Books=主干。集合.扩展({url:“/books”});
这个收藏和模型组件一起构成直接使用以下方法映射REST资源:
GET/books/。。。。collection.fetch();邮政/书籍/。。。。collection.create();GET/books/1。。。model.fetch();PUT/books/1。。。model.save();DEL/books/1。。。model.destroy();
从API获取原始JSON数据时收藏将自动用格式化为数组的数据填充自身,而一模型将自动填充格式化的数据作为对象:
[{“id”:1}]。。。。。使用一个模型填充集合。{“id”:1}。。。。。。。使用一个属性填充模型。
然而,经常会遇到在与Backbone期望的格式不同。例如,考虑获取收藏从返回真实数据的API元数据中包装的数组:
{“页面”:1,“限制”:10,“总计”:2,“书籍”:[{“id”:1,“title”:“傲慢与偏见”},{“id”:4,“title”:“了不起的盖茨比”}]}
在上述示例数据中收藏应该使用“书籍”数组,而不是根对象结构。这个使用解析方法返回(或转换)所需的API数据部分:
var Books=主干。集合.扩展({url:“/books”,解析:函数(数据){返回data.books;}});
视图渲染
每个查看在自己的内部管理渲染和用户交互DOM元素。如果你严格要求不允许视图到达外部就其本身而言,它有助于保持界面的灵活性-允许在任何可能需要视图的地方单独呈现视图。
主干仍然对渲染过程不感兴趣查看对象及其子视图转换为UI:定义模型的转换方式到HTML(或SVG,或画布,或其他更具异国情调的东西)。它可以像简单一样平淡下划线模板或者像反应虚拟DOM.可以找到渲染视图的一些基本方法在中主干底漆.
使用URL路由
在富web应用程序中,我们仍然希望提供可链接的,指向应用程序中有意义位置的可书签和可共享URL。使用路由器每当用户在你的应用程序中找到一个新的“位置”,他们可能希望将其添加书签或共享。相反路由器检测URL的更改,例如,按下“后退”按钮,可以告诉应用程序您的确切位置现在是。
骨干。事件
事件是一个可以混合到任何对象中的模块对象绑定和触发自定义命名事件的功能。事件不会必须在绑定之前声明,并且可以接受传递的参数。例如:
var对象={};_.extend(对象,Backbone.Events);object.on(“警报”,函数(消息){警报(“已触发”+消息);});object.trigger(“警报”,“事件”);
例如,要制作一个方便的事件调度器来协调事件在应用程序的不同领域中:var dispatcher=_.clone(Backbone.Events)
对象.on(事件,回调,[context])
别名:绑定
绑定回调函数到对象。将调用回调每当事件被解雇。如果页面上有大量不同的事件,则惯例是使用冒号名称空间:“投票:开始”,或“更改:选择”.事件字符串也可以是几个事件的空格分隔列表。。。
book.on(“更改:标题更改:作者”,…);
绑定到特殊的回调“全部”事件将在任何事件发生时触发,并被传递事件的名称作为第一个参数。例如,代理所有事件从一个对象到另一个对象:
on(“all”,函数(eventName){object.trigger(eventName);});
作为替代方法,所有主干事件方法也支持事件映射语法到位置参数:
预订({“change:author”:authorPane.update,“更改:标题更改:副标题”:titleView.update,“销毁”:bookView.remove});
要提供上下文的值这调用回调时,传递可选的最后一个参数:模型.on('change',this.render,this)或model.on({change:this.render},this).
object.off([事件]、[回调]、[上下文])
别名:取消绑定
删除上一个绑定回调对象的函数。如果没有上下文指定时,使用不同的上下文将被删除。如果没有指定回调时事件将远离的。如果未指定事件,则回调全部的事件将被删除。
//只删除“onChange”回调。object.off(“更改”,onChange);//删除所有“更改”回调。object.off(“更改”);//删除所有事件的“onChange”回调。object.off(null,onChange);//删除所有事件的“context”的所有回调。object.off(null,null,context);//删除“object”上的所有回调。object.off();
注意,呼叫型号.off()例如,将确实删除全部的事件包括Backbone用于内部记账的事件。
object.trigger(事件,[*args])
为给定的触发回调事件,或以空格分隔的事件列表。的后续参数触发将传递给事件回调。
object.once(事件、回调、[context])
就像在,但会引发绑定回调只有一次才被移除。Handy说“下次X发生时,就这么做”。当使用空格分隔语法传入多个事件时,事件将触发一次对于你传入的每个事件,而不是所有事件的组合
object.listenTo(其他、事件、回调)
告诉一个对象在其他对象。使用此表单的优点other.on(事件,回调,对象),是吗倾听允许对象以跟踪事件,稍后可以将其全部删除上回调将始终被调用对象作为上下文。
view.listenTo(model,'change',view.render);
object.stopListing([其他],[事件],[回调])
告诉一个对象停止收听事件。任何一个呼叫停止收听没有参数来拥有对象去除它的全部已注册回调。。。或者更多通过告诉它只删除它在特定对象、特定事件或仅特定回调。
view.stopListing();view.stopListing(模型);
object.listenToOnce(其他、事件、回调)
就像倾听,但会导致边界回调在删除之前只触发一次。
这是内置主干事件的完整列表,带有参数。您还可以在模型、集合和视情况而定。这个骨干对象本身混合事件,并可用于发出应用程序所需的任何全局事件。
- “添加”(模型、集合、选项)-将模型添加到集合时。
- “删除”(模型、集合、选项)-从集合中删除模型时。
- “更新”(集合,选项)-在集合中添加、删除或更改任意数量的模型后触发的单个事件。
- “重置”(集合,选项)-当集合的全部内容重置.
- “排序”(集合,选项)-集合重新排序时。
- “更改”(模型、选项)-模型属性发生更改时。
- “changeId”(model,previousId,options)-更新模型id时。
- “更改:[属性]”(模型、值、选项)-更新特定属性时。
- “销毁”(模型、集合、选项)-当模型摧毁.
- “请求”(model_or_collection,xhr,options)-当模型或集合启动对服务器的请求时。
- “同步”(model_or_collection、response、options)-当模型或集合已成功与服务器同步时。
- “错误”(model_or_collection,xhr,options)-当模型或集合对服务器的请求失败时。
- “无效”(模型、错误、选项)-当模型验证客户端上出现故障。
- “路由:[名称]”(params)-当特定路由匹配时由路由器激发。
- “路由”(route,params)-当任何路由已匹配。
- “路由”(router、route、params)-当任何路由已匹配。
- “未找到”()-在以下情况下被历史激发不路线可以匹配。
- “全部”-这项特别活动的目的是任何触发事件,将事件名称作为第一个参数传递,然后传递所有触发器参数。
一般来说,当调用发出事件的函数时(模型.集,集合.添加等等…),如果你想防止事件被触发,你可以通过{silent:真}作为一种选择。请注意,这是很少地,也许永远不会,这是个好主意。通过特定标志在事件回调的选项中查看并选择忽略,通常会做得更好。
骨干。模型
模型是任何JavaScript应用程序的核心,包含交互式数据以及围绕它的大部分逻辑:转换、验证、计算属性和访问控制。你延伸骨干。模型使用特定于域的方法,以及模型提供了一组用于管理更改的基本功能。
下面是一个虚构的示例,但它演示了如何定义模型使用自定义方法,设置属性并触发键控事件更改特定属性。运行此代码一次后,侧边栏将在浏览器控制台中可用,因此您可以随意使用它。
var边栏=主干。型号.扩展({promptColor:function(){var cssColor=提示(“请输入CSS颜色:”);this.set({color:cssColor});}});window.sidebar=新边栏;侧栏打开('change:color',函数(model,color){$(“边栏”).css({背景:颜色});});sidebar.set({color:'white'});侧栏.promptColor();
骨干。Model.extend(属性,[classProperties])
要创建模型你自己的类,你扩展骨干。模型并提供实例属性,以及可选类属性直接附加到构造函数。
延伸正确设置原型链,以便创建子类具有延伸可以根据需要进一步扩展和子类化。
var注释=主干。型号.扩展({initialize:function(){…},作者:function(){…},坐标:function(){…},allowedToEdit:函数(帐户){返回true;}});var PrivateNote=注释扩展({allowedToEdit:函数(帐户){return account.owns(本);}});
暂不介绍超级的:JavaScript不提供调用super的简单方法&定义了同名函数原型链上的更高位置。如果覆盖核心函数,如设置,或节约,并且您希望调用父对象的实现,您必须按照以下路线显式调用它:
var注释=主干。型号.扩展({集合:函数(属性、选项){骨干。Model.prototype.set.apply(this,arguments);...}});
新模型([属性],[选项])
用于作为ES类与模型一起使用。如果您定义预初始化方法,它将在首次创建模型时调用为模型运行实例化逻辑。
class国家延伸主干。型号{预初始化({countryCode}){this.name=COUNTRY_NAMES[国家代码];}initialize(){…}}
新模型([属性],[选项])
创建模型实例时,可以传入初始值的属性,将是设置上模型。如果您定义初始化函数,当创建模型。
新书({标题:《一千零一夜》,作者:“Scheherazade”});
在极少数情况下,如果你想变得花俏,您可能想覆盖建造师,这允许您可以替换模型的实际构造函数。
var Library=主干。型号.扩展({构造函数:function(){this.books=新书();骨干。模型.应用(this,arguments);},解析:函数(数据、选项){this.books.reset(data.books);返回数据库;}});
如果您通过{集合:…}作为选项,模型获得a收集属性,用于指示模型所属的集合,用于帮助计算模型的网址. The模型.集合属性为通常在首次向集合中添加模型时自动创建。请注意,相反的情况并非如此,因为将此选项传递给构造函数不会自动将模型添加到集合中。有时很有用。
如果{解析:true}作为选项,的属性将首先由转换解析在成为设置在模型上。
model.get(属性)
从模型中获取属性的当前值。例如:note.get(“标题”)
model.set(属性,[选项])
在模型上设置属性哈希(一个或多个)。如果任何属性更改模型的状态“更改”事件将在模型上触发。也会触发特定属性的更改事件,您可以绑定例如:更改:标题、和更改:内容.您还可以传递单个键和值。
note.set({标题:“3月20日”,内容:“在他眼中,她黯然失色…”});book.set(“标题”,“波西米亚丑闻”);
model.escape(属性)
类似得到,但返回HTML-escaped版本模型属性的。如果要将模型中的数据插值到HTML,使用逃跑检索属性将阻止XSS公司攻击。
var hacker=新主干。型号({name:“<script>警报('xss')</script>”});alert(hacker.escape('name'));
model.has(属性)
退换商品真的如果属性设置为非空或非未定义值。
if(note.has(“标题”)){...}
model.unset(属性,[选项])
通过从内部属性散列中删除属性来移除属性。激发a“更改”事件,除非沉默的作为选项传递。
model.clear([选项])
从模型中删除所有属性,包括身份证件属性。激发a“更改”事件,除非沉默的作为选项传递。
模型.id
模型的一个特殊属性身份证件是任意字符串(整数id或UUID)。如果您设置身份证件在中属性哈希,它将作为直接属性复制到模型中。模型.id
不应被直接操纵,只能通过以下方式修改模型集('id',…)
.可以通过id从集合中检索模型,该id用于生成默认情况下为URL建模。
model.id属性
模型的唯一标识符存储在身份证件属性。如果您直接与使用不同的唯一键,您可以设置模型的id属性到从该键透明地映射到身份证件.如果你设置id属性,您可能还想覆盖cid前缀.
var Meal=主干。型号.扩展({idAttribute:“_id”});var蛋糕=新餐({_id:1,名称:“蛋糕”});警报(“Cake id:”+Cake.id);
模型.cid
模型的一个特殊属性cid公司或客户端id是唯一标识符首次创建时自动分配给所有模型。客户端ID当模型还没有保存到服务器时很方便但最终还是有它的真实性身份证件,但已经需要在UI中可见。
model.cid前缀
如果您的模型具有身份证件那不是整数或UUID,则有可能与它的cid公司。为了防止出现这种情况,可以覆盖前缀那个cid公司s以开头。
//如果两个长度都是2,请在运行此示例之前刷新页面。var clashy=新主干。收藏([{id:“c2”},{id:'c1'},]);alert('模糊长度:'+clashy.length);var ClashFree=主干。模型扩展({cidPrefix:'m'});var clashless=新骨干。收藏([{id:“c3”},{id:“c2”},],{型号:ClashFree});警报('无冲突长度:'+无冲突长度);
模型属性
这个属性属性是包含模型的state-通常(但不一定)是JSON对象的一种形式表示服务器上的模型数据。这通常是一个简单的从数据库中序列化行,但也可以是客户端计算状态。
请使用设置更新属性而不是直接修改它们。如果你想取回并咀嚼模型属性的副本,使用_.clone(模型属性)而不是。
由于事件接受空格分隔事件列表、属性名称不应包含空格。
模型.已更改
这个改变属性是包含所有属性的内部哈希自上次以来发生了变化设置.请不要更新改变直接因为其状态是内部维护的通过设置一份改变可以从以下位置获取更改的属性.
model.defaults或model.default()
这个默认值哈希(或函数)可用于指定默认值模型的属性。创建模型实例时,任何未指定的属性都将设置为其默认值。
var Meal=主干。型号.扩展({默认值:{“开胃菜”:“凯撒沙拉”,“主菜”:“饺子”,“甜点”:“芝士蛋糕”}});alert(“甜品将是”+(新餐).get(“甜点”));
记住,在JavaScript中,对象是通过引用传递的,因此如果您包含一个对象作为默认值,它将在所有实例之间共享。相反,定义默认值作为函数。
如果您为模型的id属性,您应该定义作为函数的默认值返回不同的,普遍地每个调用的唯一id。否则可能会阻止的实例骨干。收藏从正确识别模型散列,这几乎肯定是一个错误,除非您从未添加实例将模型类的。
model.toJSON([选项])
返回模型的浅层副本属性用于JSON字符串化。这可以用于持久性,序列化,或在发送到服务器之前进行增强。这个这个方法的名称有点混乱,因为它实际上并没有返回JSON字符串-但恐怕这是的JavaScript APIJSON.stringify格式作品。
var artist=新主干。型号({firstName:“Wassily”,姓氏:“康定斯基”});artist.set({生日:“1866年12月16日”});警报(JSON.stringify(艺术家));
model.sync(方法、模型、[选项])
使用主干网同步将模型的状态持久化到服务器。可以为自定义行为重写。
model.fetch([选项])
将模型的状态与从服务器获取的属性合并授权给主干网同步。返回一个jqXHR公司.如果模型从未已填充数据,或者如果您希望确保最新服务器状态。触发器a“更改”事件,如果服务器的状态与当前属性不同。取来接受成功和错误选项散列中的回调,其中都通过了(型号、响应、选项)作为参数。
//每10秒轮询一次,以保持频道模型最新。setInterval(函数(){channel.fetch();}, 10000);
model.save([属性],[选项])
将模型保存到数据库(或替代持久层),通过委托给主干网同步。返回一个jqXHR公司如果验证成功,并且假否则。这个属性散列(如设置)应包含属性你想更改-没有提到的键不会被更改-但是,一完整表示将资源发送到服务器。与相同设置,您可以传递单个键和值,而不是散列。如果模型具有验证方法,并且验证失败,则不会保存模型。如果模型是新的,保存将是“创建”(HTTP邮政),如果模型已经存在于服务器上,则保存将是“更新”(HTTPPUT(输出)).
如果相反,你只想改变属性发送到服务器,调用model.save(属性,{patch:true})。您将获得HTTP补丁只使用传入属性向服务器发出请求。
打电话节约使用新属性将导致“更改”立即发生事件,a“请求”Ajax请求开始时发生转到服务器,然后“同步”服务器确认后的事件成功的改变。通过{等待:true}如果你愿意等的话在模型上设置新属性之前。
在下面的示例中,请注意我们的重写版本属于主干网同步收到一个“创建”请求第一次保存模型时“更新”第二次请求。
Backbone.sync=函数(方法、模型){警报(方法+“:”+JSON.stringify(模型));模型集('id',1);};var book=新主干。型号({标题:《野蛮骑士》,作者:《西奥多·罗斯福》});book.save();book.save({author:“Teddy”});
节约接受成功和错误中的回调选项哈希,它将传递参数(型号、响应、选项).如果服务器端验证失败,则返回非-200HTTP响应代码,以及文本或JSON格式的错误响应。
book.save(“作者”,“F.D.R.”,{error:function(){…}});
model.destroy([选项])
通过委派HTTP销毁服务器上的模型删除请求主干网同步。返回一个jqXHR公司对象,或假如果模型是新的.接受成功和错误选项散列中的回调,其中将通过(型号、响应、选项).触发器a“销毁”模型上的事件,该事件将弹出通过包含它的任何集合“请求”事件本身开始向服务器发出Ajax请求“同步”事件,之后服务器已成功确认删除模型。通过{等待:true}如果您想等待服务器响应从集合中删除模型之前。
book.destroy({成功:函数(模型,响应){...}});
主干代理到下划线.js提供9个对象函数在骨干。模型。这里没有全部记录,但您可以查看Undercore文档以了解详细信息…
user.pick('first_name','last_name','email');chapters.keys().join(',');
model.validate(属性、选项)
此方法未定义,建议您使用任何可以在JavaScript中执行的自定义验证逻辑。如果属性有效,则不要从返回任何内容验证;如果它们无效,则返回您选择的错误。它可以是简单到要显示的字符串错误消息或完整错误对象,该对象以编程方式描述错误。
默认情况下节约检查验证之前设置任何属性,但您也可以告诉设置以验证传递的新属性{validate:true}作为一种选择。这个验证方法接收模型属性以及任何选项传递给设置或节约,如果验证返回错误,节约不继续,模型属性未在服务器上修改“无效”事件被触发,和验证错误属性在模型上设置此方法返回的值。
var Chapter=主干。型号.扩展({验证:函数(属性、选项){if(attrs.end<attrs.start){return“无法在开始之前结束”;}}});var one=新章节({title:“第一章:开始”});one.on(“无效”,函数(模型,错误){警报(model.get(“title”)+“”+错误);});一次保存({开始时间:15,结束:10});
“无效”事件对于提供粗粒度错误很有用模型或集合级别的消息。
模型.验证错误
返回的值验证在上次验证失败期间。
model.isValid(选项)
运行验证检查模型状态。
这个验证方法接收模型属性以及任何选项传递给是否有效,如果验证返回错误一个“无效”事件,并在中的模型验证错误属性。
var Chapter=主干。型号.扩展({验证:函数(属性、选项){if(attrs.end<attrs.start){return“无法在开始之前结束”;}}});var one=新章节({title:“第一章:开始”});一套({开始时间:15,结束:10});if(!one.isValid()){警报(one.get(“title”)+“”+one.validationError);}
模型.url()
返回模型资源所在的相对URL服务器。如果您的模型位于其他位置,请覆盖此方法逻辑正确。生成表单的URL:“[collection.url]/[id]”默认情况下,但可以通过指定显式URL根如果不应该考虑模型的集合。
委派给集合#url生成URL,因此请确保已定义它,或者URL根属性,如果此类的所有模型共享一个公共根URL。id为的模型101,存储在骨干。收藏用一个网址属于“/documents/7/notes”,将具有以下URL:“/documents/7/notes/101”
model.urlRoot或model.url根()
指定一个URL根如果你使用的是模型外部收藏,启用默认值网址要生成的函数基于模型id的URL。“[urlRoot]/id”
通常,您不需要定义这一点。请注意URL根也可以是一个函数。
var Book=主干。Model.extend({urlRoot:'/books'});var solaris=新书({id:“1083-lem-solaris”});警报(solaris.url());
model.parse(响应,选项)
解析当模型的数据由服务器,在取来、和节约.函数被传递给原始响应对象,并应返回属性散列为设置在模型上。这个默认实现是一个无操作,只需通过JSON响应。如果需要使用预先存在的API或更好的命名空间,请覆盖此选项你的回答。
如果您使用的Rails后端版本早于3.1,您会注意到它的默认值收件人(_J)实现包括命名空间下的模型属性。要对禁用此行为无缝主干集成,设置:
活动记录::Base.include_root_in_json=false
模型.克隆()
返回具有相同属性的模型的新实例。
模型.isNew()
这个模型已经保存到服务器了吗?如果模型还没有一个身份证件,它被认为是新的。
model.hasChanged([属性])
模型自上次以来是否发生了更改设置? 如果属性通过,返回真的如果该特定属性已更改。
请注意,此方法以及以下与更改相关的方法,仅在“更改”事件。
book.on(“更改”,函数(){if(book.hasChanged(“标题”)){...}});
model.changedAttributes([属性])
仅检索自上次以来更改的模型属性的哈希设置,或假如果没有。可选地,外部属性可以传入散列,返回其中的属性与模型不同的散列。这可以用来确定视图的某些部分应该更新需要将更改同步到服务器。
model.previous(属性)
在“更改”事件,此方法可用于获取已更改属性的上一个值。
var bill=新主干。型号({姓名:“比尔·史密斯”});bill.on(“更改:名称”,功能(型号,名称){警报(“名称已从”+bill.previous(“名称”)+“更改为”+名称);});bill.set({name:“bill Jones”});
model.previousAttributes()模型
返回模型先前属性的副本。对于获取模型版本之间的差异,或在出现错误。
骨干。收藏
集合是模型的有序集合。你可以绑定“更改”事件当集合中的任何模型被修改时收到通知,倾听“添加”和“删除”事件,取来从服务器收集,并使用一整套Underscore.js方法.
在集合中的模型上触发的任何事件也将为方便起见,直接在集合上触发。这允许您侦听任何集合中的模型,例如:documents.on(“change:selected”,…)
骨干。Collection.extend(属性,[classProperties])
要创建收藏你自己的类,扩展骨干。收藏,提供实例属性,以及可选类属性待连接直接指向集合的构造函数。
collection.model([属性],[选项])
重写此属性以指定集合包含的模型类。如果已定义,则可以将原始属性对象(和数组)和选项传递给添加,创造,和重置,并且属性将是使用提供的选项(如果有)转换为正确类型的模型。
var Library=主干。集合.扩展({型号:书籍});
通过重写此属性,集合还可以包含多态模型使用返回模型的构造函数。
var Library=主干。集合.扩展({模型:函数(属性,选项){if(条件){返回新的PublicDocument(属性、选项);}其他{返回新的PrivateDocument(属性、选项);}}});
集合.modelId(attrs,idAttribute)
重写此方法以返回集合将用于的值根据模型的属性识别模型。用于组合来自的模型具有不同的多个表id属性值合并到单个集合中。
默认情况下,返回给定id属性在属性或者如果失败,身份证件.如果您的收藏使用模型工厂和这些模型的id范围可能会冲突,您必须这样做重写此方法。
var Library=主干。集合.扩展({modelId:函数(属性){返回attrs.type+attrs.id;}});var库=新库([{类型:'dvd',id:1},{类型:'vhs',id:1}]);var dvdId=library.get('dvd1').id;var vhsId=library.get('vhs1').id;警报('dvd:'+dvdId+',vhs:'+vhsId);
新骨干。系列([型号],[选项])
用于将集合用作ES类。如果您定义预初始化方法,它将在首次创建集合时调用为集合运行任何实例化逻辑。
类库扩展了主干网。收藏{预初始化(){this.on(“添加”,函数(){console.log(“添加模型事件已启动!”);});}}
新主干。系列([型号],[选项])
创建集合时,可以选择传入初始数组属于模型。该系列比较器可能包含在选项中。经过假作为比较器选项将阻止排序。如果您定义初始化函数,当集合创建。如果提供了几个选项,则会附加到直接收集:模型和比较器.
通过无效的对于模型使用创建空集合选项.
var tabs=新的TabSet([tab1,tab2,tab3]);var spaces=新主干。集合(null{模型:空间});
如果{解析:true}作为选项,的属性将首先由转换解析在成为设置在集合上。
集合.模型
对集合内模型的JavaScript数组的原始访问。通常你会想要使用得到,在,或底层方法访问模型对象,但偶尔会直接引用数组需要。
collection.toJSON([选项])
返回包含每个模型的属性哈希的数组(通过到JSON)在中收藏。这可用于序列化和持久化整个收藏。这个方法的名称有点令人困惑,因为它符合JavaScript的JSON API.
var集合=新主干。集合([{name:“Tim”,年龄:5},{姓名:“Ida”,年龄:26},{name:“Rob”,年龄:55}]);警报(JSON.stringify(集合));
collection.sync(方法,集合,[选项])
使用主干网同步保持集合发送到服务器。可以为自定义行为重写。
主干代理到下划线.js提供46个迭代函数在骨干。收藏。这里没有全部记录,但您可以查看Undercore文档以了解详细信息…
大多数方法可以采用对象或字符串来支持模型属性样式谓词或接收模型实例作为参数的函数。
books.each(函数(book){book.publish();});var titles=books.map(“标题”);var publishedBooks=books.filter({published:true});var字母=books.sortBy(函数(book){return book.author.get(“name”).toLowerCase();});var randomThree=books.sample(3);
collection.add(模型,[选项])
将模型(或模型数组)添加到集合中一个“添加”每个模型的事件,以及“更新”事件之后。这是一个变体属于设置使用相同的选项和返回值,但它总是添加,从不删除。如果你是将模型添加到集合中已经在中集合,它们将被忽略,除非您通过{合并:真},在这种情况下,它们的属性将合并到相应的模型,激发任何适当的“更改”事件。
var ships=新主干。收藏;ships.on(“添加”,函数(ship){警报(“Ahoy”+ship.get(“name”)+“!”);});发货.添加([{名称:“飞翔的荷兰人”},{name:“黑珍珠”}]);
请注意,添加相同的模型(具有相同身份证件)至多次收集
是一个no-op。
集合.remove(模型,[选项])
从集合中删除模型(或模型数组),然后返回他们。每个模型都可以是一个model实例身份证件字符串或JS对象,任何可接受的值身份证件的论点收藏.get.激发a“删除”每个模型的事件,以及单个“更新”事件之后,除非{silent:真}已通过。删除之前的模型索引对侦听器可用选项索引.
集合重置([型号],[选项])
一次添加和删除一个模型是很好的,但有时你有太多的模型要更改,所以你宁愿更新集合散装。使用重置用新列表替换集合模型(或属性散列),触发单个“重置”事件竣工时,以及没有触发任何模型上的任何添加或删除事件。返回新设置的模型。为了方便起见,在“重置”事件,任何以前的型号可用作选项.以前的型号.
通过无效的对于模型清空您的收藏选项.
下面是一个使用重置要在初始页面加载期间引导集合,在Rails应用程序中:
<脚本>var账户=新主干。收藏;accounts.reset(<%=@accounts.to_json%>);</script>
打电话集合.reset()不将任何模型作为参数传递将清空整个集合。
collection.set(模型,[选项])
这个设置方法对集合中包含传递的模型列表。如果模型位于列表尚未包含在要添加的集合中;如果模型已在集合中,其属性将被合并;和如果集合包含任何模型不是出现在列表中时,它们将被删除。所有适当的“添加”,“删除”、和“更改”事件就这样被解雇了“更新”事件最后。返回集合中的触摸模型。如果如果要自定义此行为,可以使用选项:{添加:false},{remove:false},或{合并:假}.
如果模型属性已定义,您还可以传递原始属性对象和选项使用提供的选项。如果你设置一比较器,的集合将自动排序并触发一“排序”除非你通过{排序:假}或使用{at:索引}选项。通过{at:索引}将模型拼接到集合中明确规定指数.
var vanHalen=新主干。收藏([eddie,alex,stone,roth]);vanHalen.set(埃迪、亚历克斯、斯通、哈加);//为罗斯触发“删除”事件,为“哈加”触发“添加”事件。//更新stone、alex和eddie可能具有的任何属性//这些年来发生了变化。
collection.get(id)
从集合中获取模型,该集合由身份证件,一cid公司,或通过传入模型.
var book=library.get(110);
集合。位于(索引)
从由索引指定的集合中获取模型。如果您的收藏很有用已排序,如果您的收藏未排序,在仍将按插入顺序检索模型。当传递负指数时将从集合的后面检索模型。
collection.push(模型,[选项])
喜欢添加,但始终添加模型在收集结束时,从不进行排序。
collection.pop([选项])
从集合中移除并返回最后一个模型。采用与相同的选项去除.
collection.unshift(模型,[选项])
喜欢添加,但始终添加模型在收集开始时,从不排序。
collection.shift([选项])
从集合中移除并返回第一个模型。采用与相同的选项去除.
collection.slice(开始,结束)
使用与相同的选项返回此集合模型的浅层副本本地的数组#切片.
收集.长度
与数组一样,Collection维护长度属性,计数它包含的模型数。
收藏伙伴
默认情况下没有比较器收集。如果定义比较器,它将用于对集合进行任何排序添加模型的时间。比较器可以定义为排序依据(传递接受单个参数的函数),作为一个分类(传递一个需要两个参数的比较器函数),或者作为指示要排序的属性的字符串。
“sortBy”比较器函数获取模型并返回数字或字符串模型相对于其他模型的排序依据的值。“sort”比较器函数采用两个模型,并返回-1如果第一个模型应该在第二个模型之前,0如果他们是相同级别和1如果第一个模型应该紧随其后。请注意,Backbone取决于比较器函数的arity在这两种样式之间确定,因此如果比较器起作用,请小心已绑定。
请注意,即使本例中的所有章节都是向后添加的,它们以正确的顺序出现:
var Chapter=主干。模型;var chapters=新主干。收藏;chapters.comparator=“页面”;chapters.add(新章节({page:9,标题:“结束”}));chapters.add(新章节({page:5,标题:“中间”}));增加章节(新章节({页码:1,标题:“开端”});警惕(章节。弹拨(“标题”);
如果您使用比较器,则集合不会自动重新排序稍后更改模型属性,因此您可能希望调用分类更改会影响订单的模型属性后。
collection.sort([选项])
强制集合重新排序自身。请注意,带有比较器将自行排序添加模型时自动执行。添加时禁用排序模特、传球{排序:假}到添加.正在呼叫分类触发“排序”集合上的事件。
collection.pulch(属性)
从集合中的每个模型中提取一个属性。相当于呼叫地图并从迭代器返回单个属性。
var stooges=新骨干。收藏([{name:“卷曲”},{name:“Larry”},{名称:“Moe”}]);var names=stooges.pulch(“name”);警报(JSON.stringify(名称));
collection.where(属性)
返回集合中与通过属性。适用于以下简单情况滤波器.
var friends=新主干。收藏([{name:“Athos”,job:“枪手”},{name:“Porthos”,job:“枪手”},{name:“Aramis”,job:“枪手”},{name:“d'Artagnan”,job:“Guard”},]);var musketeers=好友.where({job:“枪手”});警惕(火枪手长度);
collection.findWhere(属性)
就像哪里,但仅直接返回集合中与传递的属性.如果没有匹配的模型返回未定义.
collection.url或collection.rul()
设置网址要引用的集合上的属性(或函数)它在服务器上的位置。集合中的模型将使用网址构造自己的URL。
var注释=主干。集合.扩展({url:“/notes”});//或者,一些更复杂的东西:var注释=主干。集合.扩展({url:函数(){return this.document.url()+'/notes';}});
collection.parse(响应,选项)
解析当集合的模型由服务器返回,在取来.函数被传递给原始响应对象,并应返回模型属性数组补充到集合中。默认实现是no-op,只需传递通过JSON响应。如果需要使用预先存在的API,或更好的命名空间。
var推文=主干。集合.扩展({//推特搜索API在“结果”下返回推文。解析:函数(响应){返回响应结果;}});
collection.clone()
返回具有相同模型列表的集合的新实例。
collection.fetch([选项])
从服务器获取此集合的默认模型集,设置当他们到达时,他们就在收藏品上。这个选项散列take成功和错误回调这两项都会通过(收集、响应、选项)作为参数。当模型数据从服务器返回时,它使用设置(智能地)合并提取的模型,除非您传递{重置:true},在这种情况下,收集将(高效)重置.委派给主干网同步在自定义持久性策略和返回的封面下jqXHR公司.的服务器处理程序取来请求应返回一个JSON数组模型。
Backbone.sync=函数(方法、模型){警报(方法+“:”+model.url);};var账户=新主干。收藏;accounts.url=“/accounts”;accounts.fetch();
的行为取来可以使用可用的设置选项。例如,要获取收集,获取“添加”每个新模型的事件,以及一“更改”每个已更改的现有模型的事件,没有删除任何内容:collection.fetch({remove:false})
jQuery.ajax文件选项也可以直接传递为取来选项,因此,要获取分页集合的特定页面:Documents.fetch({data:{page:3}})
请注意取来不应用于填充上的集合页面加载-加载时所需的所有模型都应该已经自举的放在适当的位置。取来是用于不需要的接口的延迟加载模型立即:例如,包含注释集合的文档打开和关闭。
collection.create(属性,[选项])
方便在集合中创建模型的新实例。相当于使用属性散列实例化模型,将模型保存到服务器,并在已成功创建。返回新模型。如果客户端验证失败,模型将无法保存,并出现验证错误。为了使其工作,您应该将模型集合的属性。这个创造方法可以接受属性哈希和选项在模型实例化或现有的未保存模型对象期间传递。
创建模型将导致立即“添加”将要发生的事件在集合上触发,a“请求”事件作为新模型发送到服务器,以及“同步”事件,一旦服务器已作出响应,成功创建了模型。通过{等待:true}如果您想在将新模型添加到集合之前等待服务器。
var Library=主干。集合扩展({型号:书籍});var nypl=新库;var othello=nypl.创建({标题:“奥赛罗”,作者:《威廉·莎士比亚》});
骨干。集合.mixin(属性)
混合蛋白
提供了增强基础的方法骨干。收藏以及任何扩展它的集合。这可以用于添加泛型方法(例如,附加底层方法).
骨干。收藏.mixin({sum:函数(模型,迭代){return _.reduce(模型、函数(s,m){返回s+迭代(m);}, 0);}});var cart=新主干。收藏([{price:16,name:‘垄断’},{价格:5,名称:'牌堆'},{price:20,name:象棋}]);var cost=购物车金额('价格');
骨干。路由器
Web应用程序通常为应用程序中的重要位置。直到最近,散列片段(#第页)被用来提供这些永久链接,但历史API的到来,现在可以使用标准URL(/第页).骨干。路由器提供路由客户端页面的方法,以及将它们与动作和事件联系起来。对于尚不支持的浏览器历史API,路由器处理优雅的回退和透明翻译为URL的片段版本。
在页面加载期间,在应用程序完成创建其所有路由器之后,一定要打电话Backbone.history.start()或Backbone.history.start({pushState:true})以路由初始URL。
骨干。路由器扩展(属性,[类属性])
从创建自定义路由器类开始。定义动作函数当某些URL片段匹配,并提供路线搞砸将路由与操作配对。请注意,您希望避免使用路线定义中的前导斜线:
var Workspace=主干。路由器扩展({路由:{“帮助”:“帮助”,//#help“search/:query”:“search”,//#search/kiwis“搜索/:查询/p:page”:“搜索”//#search/kiwis/p7},帮助:函数(){...},搜索:功能(查询,页面){...}});
路由器.路线
路由散列将带有参数的URL映射到路由器上的函数(如果您愿意,也可以直接定义函数),类似于查看的事件散列.路由可以包含参数部分,:参数,与单个URL匹配斜杠之间的分量;和splat部件*溅射,可以匹配任意数量的URL组件。路线的一部分可以通过以下方式设置为可选用括号括起来(/:可选).
例如“搜索/:查询/p:page”将匹配一段#搜索/obama/p2,通过“奥巴马”和"2"作为位置参数发送到操作。
一条路线“文件/*路径”将匹配#文件/文件夹/file.txt,通过“文件夹/文件.txt”行动。
一条路线“docs/:节(/:子节)”将匹配#文档/常见问题和#docs/faq/安装,通过“常见问题”第一种情况下的行动,并通过“常见问题”和“正在安装”第二步的动作。
嵌套的可选路由“文档(/:节)(/:子节)”将匹配#文档,#文档/常见问题、和#docs/faq/安装,经过“常见问题”第二起案件中的诉讼,并通过“常见问题”和“正在安装”第三节的动作。
尾部斜杠被视为URL的一部分,并(正确)处理作为访问时的唯一路径。文档和文档/会开火的不同的回调。如果不能避免生成这两种类型的URL可以定义“文档(/)”matcher来捕获这两种情况。
当访问者按下后退按钮或输入URL时路由匹配时,操作的名称将作为事件,以便其他对象可以侦听路由器,并得到通知。在以下示例中,访问#帮助/上传将触发路线:帮助来自路由器的事件。
路由:{“help/:page”:“帮助”,“download/*path”:“下载”,“folder/:name”:“openFolder”,“folder/:name-:mode”:“openFolder”}
router.on(“路由:帮助”,功能(第页){...});
新主干。路由器([选项])
作为ES类与路由器一起使用。如果您定义预初始化方法,它将在首次创建路由器时调用为路由器运行任何实例化逻辑。
类路由器扩展主干网。路由器{预初始化(){//覆盖执行方法this.execute=函数(回调、参数、名称){如果(!loggedIn){goToLogin();返回false;}args.push(parseQueryString(args.pop()));if(回调)回调.apply(this,args);}}}
新路由器([选项])
创建新路由器时,您可以将其路线直接散列作为选项,如果您选择。全部选项也将传递给您的初始化函数(如果已定义)。
router.route(路由、名称、[回调])
手动创建路由器的路由路线参数可以成为路由字符串或正则表达式。来自路由或正则表达式的每个匹配捕获都将作为回调的参数。这个名称参数将被触发为一“路由:名称”匹配路由时发生事件。如果回调参数被省略路由器[名称]将使用相反。以后添加的路由可能会覆盖以前声明的路由。
initialize:函数(选项){//匹配#page/10,通过“10”this.route(“page/:number”,“page”,函数(number){…});//匹配/117-a/b/c/open,将“117-a/b/c”传递给this.openthis.route(/^(.*?)\/open$/,“打开”);},打开:函数(id){…}
router.navigate(片段,[选项])
当您在应用程序中到达要保存的点时作为URL,调用导航以更新URL。如果您还希望调用路由功能,请将触发选择真的.要更新URL而不在浏览器历史记录中创建条目,设置代替选择真的.
openPage:函数(pageNumber){this.document.pages.at(pageNumber).open();this.navigation(“page/”+页码);}#或者。。。app.navigate(“帮助/疑难解答”,{trigger:true});#或者。。。app.navigate(“帮助/疑难解答”,{trigger:true,replace:true});
router.execute(回调,参数,名称)
每当路由匹配项及其对应项回调即将执行。返回假从execute取消当前转换。重写它以执行路由的自定义解析或包装例如,在将查询字符串传递给路由之前对其进行解析回调,如下所示:
var路由器=主干。路由器扩展({执行:函数(回调、参数、名称){if(!loggedIn){goToLogin();返回false;}args.push(parseQueryString(args.pop()));if(回调)回调.apply(this,args);}});
主干网历史记录
历史作为全局路由器(每帧)来处理哈希变换事件或pushState(推送状态),匹配适当的路由,并触发回调。它转发“路由”和“路由[名称]”的事件匹配路由器,或“未找到”当任何路由器中没有路由时与当前URL匹配。你不应该非得自己创建一个,因为主干网历史记录已包含一个。
pushState(推送状态)Backbone中的支持完全基于opt-in基础。不支持的旧浏览器pushState(推送状态)将继续使用基于散列的URL片段,以及pushState(推送状态)-功能强大的浏览器,它将透明地升级到真实URL。请注意,使用真实URL需要您的web服务器能够正确呈现这些页面,因此需要进行后端更改也。例如,如果您有一条/文档/100,如果浏览器直接访问该URL。要获得完整的搜索引擎爬行能力,最好让服务器为页面生成完整的HTML。。。但如果是网络应用程序,只是呈现与根URL相同的内容,并用主干视图和JavaScript填充其余部分。
Backbone.history.start([选项])
当你所有的路由器已创建,所有路线都设置好了,打电话给Backbone.history.start()开始监视哈希变换事件和调度路由。后续调用Backbone.history.start()将抛出错误,和骨干。历史记录.开始是一个布尔值,指示是否它已经被叫来了。
表示您想使用HTML5pushState(推送状态)中的支持您的应用程序,使用Backbone.history.start({pushState:true}).如果您想使用pushState(推送状态),但其浏览器不支持它本机使用完整的页面刷新,您可以添加{hashChange:false}选项。
如果您的应用程序没有从根url获得服务/您的域中,作为一个选项,请确保告诉历史根的实际位置:Backbone.history.start({pushState:true,root:“/public/search/”}).
为提供的值根将被规范化,以包括一个前导和尾部斜线。导航到路由时,默认行为是从URL中排除尾部斜杠(例如。,/公开/搜索?查询=。。。).如果您喜欢包括尾部斜杠(例如。,/公共/搜索/?查询=。。。)使用Backbone.history.start({trailingSlash:true}).URL将始终包含前导斜杠。当根为/URL将看起来像/?查询=。。。无论拖曳斜杠.
调用时,如果路由成功匹配当前URL,Backbone.history.start()收益真的和这个“路由”和“路由[名称]”事件被触发。如果没有与当前URL匹配的已定义路由,它将返回假和“未找到”而是触发。
如果服务器已经呈现了整个页面,并且您不希望启动历史记录时触发的初始路径,通过无声:真.
因为Internet Explorer中基于哈希的历史依赖于<iframe>,请务必致电启动()仅在DOM之后已准备好。
$(函数(){新的WorkspaceRouter();新建HelpPaneRouter();Backbone.history.start({pushState:true});});
主干网同步
主干网同步是Backbone每次调用的函数尝试将模型读取或保存到服务器。默认情况下,它使用jQuery.ajax发出RESTful JSON请求并返回jqXHR公司。您可以覆盖它是为了使用不同的持久性策略,例如WebSockets,XML传输或本地存储。
的方法签名主干网同步是同步(方法、模型、[选项])
- 方法–CRUD方法(“创建”,“阅读”,“更新”,或“删除”)
- 模型–要保存的模型(或要读取的集合)
- 选项–成功和错误回调,以及所有其他jQuery请求选项
使用默认实现,当主干网同步发送保存请求一个模型,它的属性将被传递、序列化为JSON并发送到HTTP主体中具有内容类型应用程序/json。返回JSON响应时,发送服务器更改的模型属性,并需要在客户端上更新。响应时“读取”来自集合的请求(集合#fetch),发送一个数组模型属性对象的。
每当模型或集合开始时同步通过服务器“请求”事件。如果请求成功完成你会得到“同步”事件,以及“错误”事件。
这个同步函数可以全局重写为主干网同步,或者在细粒度级别,通过添加同步作为骨干的功能集合或单个模型。
默认值同步处理程序将CRUD映射到REST,如下所示:
- 创建→POST/集合
- 读取→获取/集合[/id]
- 更新→PUT/集合/id
- 补丁→补丁/集合/id
- 删除→删除/集合/id
例如,Rails4处理程序响应“更新”呼叫来自骨干可能如下所示:
def更新account=帐户。查找参数[:id]permited=params.require(:account).permit(:name,:otherparam)允许account.update_attributesrender:json=>帐户结束
集成3.1之前的Rails版本的另一个技巧是禁用的默认命名空间收件人(_J)通过设置调用模型活动记录::Base.include_root_in_json=false
Backbone.ajax=函数(请求){…};
如果您想使用自定义AJAX函数,或者您的端点不支持这个jQuery.ajax文件美国石油学会你需要调整一些东西,你可以通过设置骨架.ajax.
Backbone.emulative HTTP=true
如果您想使用不支持Backbone的传统web服务器默认的REST/HTTP方法,您可以选择打开Backbone.emulative HTTP.设置此选项将伪造PUT(输出),补丁和删除具有的请求HTTP邮政,设置X-HTTP-方法覆盖收割台用真实的方法。如果模拟JSON也是开的,真的方法将作为附加项通过_方法参数。
Backbone.emulative HTTP=true;model.save();//使用“_method=PUT”+标头将POST发送到“/collection/id”。
Backbone.emulative JSON=真
如果您使用的是无法处理请求的旧式web服务器编码为应用程序/json,设置Backbone.emultimulation JSON=true;将导致JSON在模型参数,和请求由应用程序/x-www-form-urlencodedMIME类型,就像来自HTML表单一样。
骨干。查看
主干视图几乎比代码更符合惯例不要为您确定任何关于HTML或CSS的信息,可以使用使用任何JavaScript模板库。总体思路是将界面组织成逻辑视图,由模型支持,当模型更改,而无需重新绘制页面。而不是深挖JSON对象,在DOM中查找元素,并手动更新HTML,你可以绑定你的视图提供模型的函数“更改”事件-现在到处都是模型数据显示在UI中,始终是最新的。
骨干。View.extend(属性,[classProperties])
通过创建自定义视图类开始使用视图。你会想的覆盖提供函数,指定您的声明的事件,也许还有标记名,类名,或身份证件视图根目录的元素。
var DocumentRow=主干。视图.扩展({标记名:“li”,className:“document-row”,事件:{“click.icon”:“打开”,“click.button.edit”:“打开编辑对话框”,“click.button.delete”:“销毁”},初始化:函数(){this.listenTo(this.model,“更改”,this.render);},渲染:函数(){...}});
属性,如标记名,身份证件,类名,埃尔、和事件也可以定义为函数,如果您希望等到运行时再定义它们。
新视图([选项])
用于将视图用作ES类。如果您定义预初始化方法,它将在首次创建视图时调用运行实例化逻辑。
类Document扩展了主干网。查看{预初始化({autoRender}){this.autoRender=自动渲染;}初始化(){if(this.autoRender){this.listenTo(this.model,“更改”,this.render);}}}
新视图([选项])
有几个特别的如果通过,将直接附加到视图的选项:模型,收集,埃尔,身份证件,类名,标记名,属性和事件.如果视图定义了初始化函数,当首先创建视图。如果要创建引用元素已经在DOM中,将元素作为选项传入:新视图({el:existingElement})
var doc=documents.first();新建DocumentRow({型号:doc,id:“document-row-”+doc.id});
视图.el
所有视图在任何时候都有一个DOM元素(埃尔属性),无论它们是否已插入页面。在这个时尚,可以随时呈现视图,并将其插入DOM all同时,为了用最少的尽可能地进行回流和重新喷漆。
this.el公司可以从DOM选择器字符串或元素进行解析;否则将从视图的标记名,类名,身份证件和属性属性。如果没有设置,this.el公司是空的div公司,这通常只是好的。安埃尔引用也可以传递给视图的构造函数。
var ItemView=主干。视图.扩展({标记名:'li'});var BodyView=主干。视图.扩展({el:'主体'});var item=新ItemView();var body=新BodyView();警报(item.el+“+body.el);
视图$埃尔
视图元素的缓存jQuery对象。一个方便的引用而不是一直重写DOM元素。
视图$el.show();listView$el.append(itemView.el);
view.setElement(元素)
如果要将Backbone视图应用于不同的DOM元素,请使用setElement(设置元素),它还将创建缓存的美元参考并将视图的委托事件从旧元素移动到新元素。
查看属性
属性的散列,该属性将在视图的埃尔(id、class、data-properties等)或返回这样的散列。
视图$(选择器)
如果页面中包含jQuery,则每个视图都有一个$函数运行视图元素范围内的查询。如果你用这个作用域jQuery函数,不必在查询中使用模型ID提取列表中的特定元素,并且可以更多地依赖HTML类属性。它相当于运行:视图$el.find(选择器)
用户界面。Chapter=主干。视图.扩展({序列化:函数(){返回{标题:这个$(“.title”).text(),开始:这个$(“.start-page”).text(),结束:这个$(“.end page”).text()};}});
view.template([数据])
虽然视图的模板化不是Backbone直接提供的功能,定义一个模板功能意见。这样,在渲染视图时,您可以方便地访问实例数据。例如,使用Underscore模板:
var LibraryView=主干。视图.扩展({template:_.template(…)});
视图.render()
的默认实现提供是no-op。覆盖此函数使用从模型数据呈现视图模板的代码,和更新this.el公司使用新的HTML。A很好惯例是把这个还给我在…的末尾提供到启用链接调用。
var书签=主干。视图.扩展({模板:_.template(…),渲染:函数(){这个$html(this.template(this.model.attributes));返回此;}});
对于您首选的HTML模板方法,Backbone是不可知的。您的提供函数甚至可以将HTML字符串混在一起,或使用文档.createElement生成DOM树。然而,我们建议选择一个好的JavaScript模板库。胡须.js,Haml-js公司、和生态都是不错的选择。因为下划线.js已在页面上,_.模板是一个很好的选择,如果你喜欢简单插值JavaScript样式模板。
无论你最终采用什么样的模板策略,如果你从未必须在JavaScript中放置HTML字符串。在DocumentCloud,我们使用贾米特整齐打包存储在中的JavaScript模板/应用程序/视图作为一部分我们主要的核心.js资产包。
view.remove()(视图.remove())
删除视图及其埃尔从DOM,并调用停止收听删除任何绑定视图具有的事件倾听'd。
view.events或view.events()
这个事件哈希(或方法)可用于指定一组DOM将绑定到视图中方法的事件通过委托事件.
主干网将在实例化时自动附加事件侦听器时间,就在调用之前初始化.
var ENTER_KEY=13;var InputView=主干。视图.扩展({tagName:'输入',事件:{“keydown”:“keyAction”,},render:函数(){…},keyAction:功能(e){if(e.which===输入键){this.collection.add({text:this.$el.val()});}}});
委托事件([事件])
使用jQuery在函数提供声明性回调用于视图中的DOM事件。如果事件哈希不是直接传递的,使用本事件作为源。事件以以下格式写入{“事件选择器”:“回调”}.回调可以是视图上方法的名称,也可以是直接函数体。省略选择器使事件绑定到视图的根元素(this.el公司). 默认情况下,委托事件被称为在View的构造函数中,因此如果您有一个简单的事件hash,所有DOM事件都将始终连接,您将永远不要自己调用这个函数。
这个事件属性也可以定义为返回一个事件散列,以便更容易以编程方式定义事件,以及从父视图继承它们。
使用委托事件提供了许多优于手动的优点使用jQuery将事件绑定到子元素提供。所有附件回调在传递给jQuery之前绑定到视图,因此当调用回调,这继续引用视图对象。什么时候?委托事件再次运行,可能使用不同的事件哈希,所有回调都被删除并重新委托-对在不同模式下需要不同行为的视图。
的单一事件版本委托事件可用作代表.事实上,委托事件只是一个多出口包装代表.对应于取消LegateEvents可用作取消委派.
在搜索结果中显示文档的视图可能看起来大致如下:
var DocumentView=主干。视图.扩展({事件:{“dblclick”:“打开”,“click.icon.doc”:“选择”,“contextmenu.icon.doc”:“showMenu”,“click.show_notes”:“切换注释”,“click.title.lock”:“editAccessLevel”,“mouseover.title.date”:“showTooltip”},渲染:函数(){这个$html(this.template(this.model.attributes));返回此;},打开:函数(){window.open(this.model.get(“viewer_url”));},选择:函数(){this.model.set({selected:true});},...});
取消删除事件()
删除视图的所有委托事件。如果您想禁用或暂时从DOM中删除视图。
公用事业
var backbone=主干.noConflict();
返回骨干对象返回到其原始值。你可以使用的返回值主干网.noConflict()保留一个本地对主干网的引用。用于在第三方上嵌入主干网站,在那里你不想破坏现有的主干网。
var localBackbone=主干.noConflict();var模型=本地骨干。模型扩展(…);
主干。$=$;
如果您有多个jQuery(jQuery)或者只是想要告诉Backbone使用特定对象作为其DOM/Ajax库,这是你的财产。
主干。$=require(“jquery”);
调试信息();
如果您需要提交缺陷报告,此函数使提供详细信息更加容易关于您的设置。它打印一个JSON对象,其中包含关于主干及其依赖项控制台调试.它还如果希望在代码中检查此对象,则返回此对象。
调试信息附带一个单独的模块这个边缘版本和1.5.0以后的版本。它在相同前缀下以UMD格式提供作为主干.js,但带有调试输入.js作为文件名。实验上也可以使用ES模块格式在下面主干网/模块/.
<!-- 浏览器嵌入--><script src=“some-path-or-url/backbone.js”><script src=“some-path-or-url/debug-info.js”><脚本>主干.debugInfo();</script>//通用JSrequire('backbone/debug-info.js')();//ESM公司从“backbon/modules/debug-info.js”导入debugInfo;调试信息();
离岸价格。
如果你的眼睛还没有被展示出来的适应性和热情所吸引在上面的示例列表,我们可以得到更具体的:Backbone.js旨在为数据丰富的web应用程序提供通用基础具有雄心勃勃的接口要求-同时刻意避免通过做出任何决定把你逼入困境更好地装备自己。
- 重点是为您提供有用的操作方法和查询您的数据而不是HTML小部件或重新创建JavaScript对象模型。
- 主干不会强制您使用单个模板引擎。视图可以绑定到在中构造的HTML你的
最喜欢的
方式.
- 它更小。您的浏览器或手机可下载的千字节更少,更少概念的表面积。你可以阅读和理解一个下午的消息来源。
- 它不依赖于将应用程序逻辑填充到HTML中。中没有嵌入式JavaScript、模板逻辑或绑定连接代码数据-或纳克-属性,并且不需要发明自己的HTML标记。
-
同步事件被用作基础构建块,而不是一个难以推理的运行循环,或通过不断轮询和遍历数据结构以查找更改。如果您希望特定事件是异步的和聚合的,没问题.
- 主干鳞片良好,从嵌入式小部件到大规模应用程序.
- 主干是一个库,而不是一个框架,可以很好地与其他库一起使用。您可以在Dojo应用程序中嵌入Backbone小部件,而不会遇到问题,也可以使用Backbone模型作为D3可视化的数据支持(完全选择两个随机示例)。
- 避免“双向数据绑定”。虽然它确实很漂亮演示,并为最基本的CRUD工作,它并不可怕在实际应用程序中非常有用。有时你想更新每次按键,有时模糊,有时面板关闭,有时单击“保存”按钮时。在几乎所有情况下,简单地说将表单序列化为JSON更快、更容易。撇开这些,如果你心已定,去
为了它.
- 选择构建您的带主干的代码。如果您确实想进一步优化精简模型和具有灵活粒度的模板使每一次挤压都很容易比如IE8的潜在性能下降。
对于刚开始处理列出的例子的人来说,这是很常见的在这一页上作为某种福音真理。事实上,Backbone.js的目的是对客户端代码中的许多常见模式相当不可知。例如。。。
模型和视图之间的引用可以通过多种方式进行处理。有些人喜欢使用直接指针,其中视图与模型(模型.view和视图.模型). 其他人更喜欢中级协调创建和组织视图到层次结构中。其他人仍然喜欢事件式方法,而且总是激发事件而不是直接调用方法。所有这些风格都很奏效。
批处理操作在模型上很常见,但通常最好以不同的方式处理取决于服务器端设置。有些人不介意单独Ajax请求。其他人为RESTful批处理操作创建显式资源:/注释/批处理/销毁?id=1,2,3,4。其他通过JSON隧道REST,使用创建“变更集”请求:
{“创建”:[要创建的模型数组]“更新”:[要更新的模型数组]“destroy”:[要销毁的模型id数组]}
请随意定义您自己的事件。 骨干。事件设计为可以将其与任何JavaScript对象或原型混合。由于可以使用任何字符串作为事件,因此绑定通常很方便并触发您自己的自定义事件:model.on(“selected:true”)或model.on(“编辑”)
呈现UI如你所愿。Backbone不知道你是否使用下划线模板,胡须.js,直接DOM操作、服务器端呈现的HTML片段,或jQuery用户界面在您的提供功能。有时您会为每个模型创建一个视图。。。有时你会有视图,在一个紧凑的循环中一次呈现数千个模型。两者都可以是根据所涉及的数据量,以及UI的复杂性。
通常使用Backbone将集合嵌套在模型中。例如,考虑一个邮箱包含多个消息模型。处理此问题的一个好模式是使用此消息收集对于每个邮箱,启用邮件的延迟加载,当邮箱首次打开。。。也许有消息列表视图正在侦听“添加”和“删除”事件。
var邮箱=主干。型号.扩展({初始化:函数(){this.messages=新消息;this.messages.url=“/邮箱/”+this.id+“/消息”;this.messages.on(“重置”,this.updateCounts);},...});var inbox=新邮箱;//然后,当“收件箱”打开时:收件箱.messages.fetch({reset:true});
如果你想找一些更有主见的东西,有很多在模型之间添加复杂关联的主干插件,在wiki上提供.
主干不包括对嵌套模型和集合的直接支持或者“有很多”关联,因为有一个数字客户端结构化数据建模的良好模式,以及主干网应该为实现其中任何一个提供基础。你可能想…
- 镜像SQL数据库的结构或NoSQL数据库的构造。
- 使用带有“外键”id数组的模型,并连接到顶层集合(a-la表)。
- 对于数量众多的关联,请使用一系列id,而不是显式列表。
- 避免id,使用直接引用,创建部分对象图表示数据集。
- 从服务器延迟加载联接模型,或延迟反序列化嵌套模型JSON文档中的模型。
当你的应用程序第一次加载时,通常会有一组初始模型你知道你需要这样才能呈现页面。而不是向发出额外的AJAX请求取来他们,更好的模式是将他们的数据引导到页面中。然后您可以使用重置填充您的包含初始数据的集合。在DocumentCloud,在能源监管局的模板在工作空间中,我们沿着以下路线做一些事情:
<脚本>var账户=新主干。收藏;accounts.reset(<%=@accounts.to_json%>);var项目=新主干。收藏;projects.reset(<%=@projects.to_json(:collaborators=>true)%>);</script>
你必须这么做逃跑
</在JSON字符串中,以防止JavaScript注入攻击。
许多JavaScript库都是孤立和自我封闭的,通过调用他们的公共API与他们交互,但永远不要偷看内脏。Backbone.js是不那种图书馆。
因为它是应用程序的基础,所以您应该以你认为合适的方式扩展和增强它-整个来源代码为带注释的让这更容易为你。你会发现除了核心之外,那里几乎没有什么函数,如果您发现这些函数中的大多数可以被覆盖或扩展需求。如果您发现自己正在向添加方法骨干。型号.型号,或者创建自己的基子类,不用担心——事情就是这样应该是有效的。
的不同实现模型视图控制器模式往往不同意控制器的定义。如果有帮助的话,在主干查看类也可以被认为是控制器的类型,使用用作真实视图的HTML模板。我们称之为视图,因为它表示UI的逻辑块,负责单个DOM元素。
将Backbone的总体结构与服务器端MVC框架进行比较喜欢栏杆,各部分排列如下:
-
骨干。模型–就像Rails模型减去类方法。在业务逻辑中封装一行数据。
-
骨干。收藏–客户端上的一组模型,具有排序/过滤/聚合逻辑。
-
骨干。路由器–栏杆路线.rb+轨道控制器行动。将URL映射到函数。
-
骨干。查看–一个逻辑的、可重用的UI。经常,但并不总是与模型相关。
-
客户端模板–栏杆.html.erb文件意见,呈现HTML块。
也许最常见的JavaScript“gotcha”是这样一个事实:将函数作为回调传递,其值用于这丢失了。处理时事件和Backbone中的回调,你会发现依赖它很有用倾听或可选上下文许多Undercore和Backbone的方法用于指定这稍后调用回调时将使用。(请参见_.每个,_.map(地图)、和对象.on,仅举几个例子)。查看事件自动绑定到视图的上下文。您可能也会发现使用_.绑定和_.bindAll(全部绑定)摘自Underscore.js。
var MessageList=主干。视图.扩展({初始化:函数(){var消息=this.collection;messages.on(“重置”、this.render、this);messages.on(“添加”,this.addMessage,this);messages.on(“删除”,this.removeMessage,this);messages.each(this.addMessage,this);}});//稍后,在应用程序中。。。Inbox.messages.add(newMessage);
Backbone.js最初是从Rails应用程序; 得到客户端(主干)模型与服务器端正确同步(Rails)模型是无痛的,但仍有一些事情需要注意。
默认情况下,3.1之前的Rails版本会添加额外的包装层围绕模型的JSON表示。您可以禁用此包装通过设置:
活动记录::Base.include_root_in_json=false
…在您的配置中。否则,覆盖解析从中提取模型属性包装器。类似地,主干PUT和POST直接使用JSON表示在模型中,默认情况下Rails期望有名称空间的属性。你可以让控制器直接从中筛选属性参数,或您可以覆盖到JSON在主干中添加Rails期望的额外包装。
示例
下面的例子虽然很长,但并不详尽任何电流。如果你开发过使用Backbone的应用程序,请将其添加到主干应用程序的wiki页面.
杰罗姆·格雷夫·尼奎特贡献了待办事项列表应用程序作为主干示例捆绑在存储库中。如果你想知道从哪里开始使用Backbone,花点时间通读带注释的源代码。该应用程序使用LocalStorage适配器在浏览器中透明地保存所有待办事项,而不是将它们发送到服务器。Jéróme也有一个版本托管在localtodos.com网站.
文档云
这个DocumentCloud工作区基于Backbone.js构建,具有文件,项目,笔记、和账户全部作为主干模型和集合。如果你对历史感兴趣-Undercore.js和Backbone.js最初从DocumentCloud代码库中提取并打包到独立的JS库中。
今日美国
今日美国利用主干网的数据/模型生命周期—使创建、继承、,隔离并链接应用程序对象,以保持代码库的可管理性和高效性。新网站还大量使用主干路由器来控制pushState-cable和旧式浏览器的页面。最后,团队利用Backbone的Event模块创建了一个PubSub API,允许第三方和分析包连接到应用程序的核心。
雷迪奥
新Rdio是从地面发展起来的基于Backbone.js的基于组件的框架。每个组件在屏幕上动态加载和呈现,数据由Rdio API。推送更改时,每个组件都可以更新自己,而无需重新加载页面或中断用户的音乐。所有这些都依赖于Backbone的视图和模型,所有URL路由都由Backbone的路由器处理。当数据更改主干网事件实时发出信号,通知感兴趣的组件在数据更改中。主干网构成了新的、动态的、实时的核心Rdio网络和桌面应用。
Hulu公司
Hulu公司使用Backbone.js构建下一个一代在线视频体验。以Backbone为基础web界面从头开始重写,以便所有页面内容都可以在导航时动态加载平滑过渡。主干网使快速浏览应用程序变得容易,无需重新加载脚本和嵌入式视频,同时还提供模型和集合以获得额外的数据操作支持。
石英
石英将自己视为数字本土新闻新的出口全球经济。因为Quartz相信开放的未来,跨平台web应用程序,他们选择了Backbone和Undercore从自定义WordPress获取、排序、存储和显示内容应用程序编程接口。尽管qz.com网站采用响应式设计适用于手机、平板电脑和桌面浏览器,它还利用了主干事件和视图在某些情况下呈现特定于设备的模板。
地球
Earth.nullschool.net网站显示实时天气交互式动画地球仪上的条件,并且Backbone提供站点所有组件的基础。尽管其他几个JavaScript库的存在,Backbone的非固执己见设计使其轻松融入事件功能用于分布状态在整个页面中发生变化。当做出决定时为了切换到Backbone,大量的自定义逻辑块就这样消失了。
Vox(语音)
Vox MediaSB国家,科技博客,多边形,食客,机架式,固化的、和Vox.com电话,在整个过程中使用主干合唱,它的家庭式出版平台。主干为直播博客平台和评论系统在所有Vox Media属性中使用;报道,内部编辑协调工具;SB Nation直播,现场事件报道和聊天工具;和Vox卡,Vox.com的highlighter-and-index-card应用程序提供了有关新闻的上下文。
高客传媒
基尼亚Gawker Media的发布平台设计好了吗打破传统之间的界限,创造伟大的故事内容创作者和消费者的角色。每个人——编辑、读者、,营销人员-可以使用相同的工具进行热情的讨论并追寻故事的真相。在Kinja生态系统允许改进所有站点的信息发现。
Kinja是后面的站台高克(Gawker),小发明,生活骇客,国际奥委会9和其他Gawker媒体博客。Backbone.js是前端应用程序代码的基础从用户身份验证到后期创作、评论,甚至服务ads.JavaScript堆栈包括下划线.js和jQuery(jQuery),带有一些插件,全部加载了要求JS。闭包模板在玩!框架基于Scala应用程序和主干视图,以及响应式布局使用完成基础框架使用SASS公司.
流量
元实验室使用Backbone.js创建流量是一款针对团队的任务管理应用程序。这个工作区依赖Backbone.js来构建任务视图、活动、帐户、,文件夹、项目和标记。你可以看到下面的内部结构窗口。流量.
吉尔特集团
吉尔特集团使用Backbone.js构建多个应用程序跨其站点系列。吉尔特的手机网站使用主干网和Zepto.js公司创造一个惊人的速度用户在外出时的购物体验,而镀金现场将主干与WebSockets可实时显示客户购买的商品。吉尔特的搜索该功能还使用Backbone高效地过滤和分类产品将这些操作移动到客户端。
谜
谜是一个聚集了最大的入口收集政府、大学、公司产生的公共数据,和组织。Enigma使用主干模型和集合来表示复杂数据结构;Backbone的路由器为Enigma用户提供了应用程序状态,允许它们在站点中快速导航保持为页面添加书签和前后导航的功能通过他们的会话。
新闻模糊
新闻模糊是RSS提要阅读器具有快速响应用户界面的社交新闻网络本机桌面应用程序。为选择Backbone.js对意大利面条代码的主要重写和转换由于其强大而简单的功能集,易于集成,并且规模巨大社区。如果你想在引擎盖下闲逛,NewsBlur也完全是开放源代码.
WordPress.com网站
WordPress.com网站是软件即服务吗的版本WordPress(文字出版社)。它使用Backbone.js其中的模型、集合和视图通知系统.Backbone.js已被选中因为它很容易适应应用程序的结构,而不是反之亦然。自动化(WordPress.com背后的公司)正在将Backbone.js集成到主页中的统计选项卡和其他功能。
Foursquare(四方)
Foursquare是一家有趣的小型初创公司,可以帮助你结识朋友,发现新地方,省钱。主干模型大量用于核心JavaScript API层和视图支持许多流行的功能,如这个主页地图和列表.
比特桶
比特桶是一个免费的源代码托管Git和Mercurial的服务。通过其模型和集合,事实证明,Backbone.js在支持Bitbucket的REST API,以及更新的组件,例如内嵌代码注释和pull请求的批准。Mustache模板提供服务器和客户端渲染,而自定义谷歌关闭受启发的小部件生命周期允许Bitbucket装饰现有DOM树并插入新的。
Disqus餐厅选择Backbone.js为他们的评论小部件的最新版本。骨干的小占地面积和易扩展性使其成为Disqus的正确选择分布式web应用程序,它完全托管在iframe和服务于数千家大型网站,包括IGN、Wired、CNN、MLB等。
美味可口
美味可口是一个社交书签平台使保存、排序和存储书签变得容易网络。美味的用途卓别林.js,Backbone.js和AppCache来构建一个功能齐全的MVC web应用程序。Backbone的使用帮助了网站和移动应用共享一个单一API服务和模型层的重用使其意义重大在最近的Delicious重新设计中,更容易共享代码。
汗学院
汗学院正在执行任务为任何地方的任何人提供免费的世界级教育。有数千人视频、数百个JavaScript驱动的练习以及未来,汗学院使用Backbone保持前端代码模块化和组织化。用户配置文件和目标设置是用Backbone实现的,jQuery(jQuery)和把手、和大多数新功能工作被推到客户端,大大提高了API.
IRC云
IRC云是您在您的浏览器-通常在选项卡中全天打开。圆滑的web界面与通过websockets和IRC云API.它大量使用Backbone.js事件、模型、视图和路由来保持您的IRC对话实时流畅。
草叉
草叉使用Backbone.js为它的站点音频播放器,草叉.tv,位置路由、直写页面片段缓存等。主干.js(和下划线.js)帮助团队创建干净的模块化组件,行动迅速,专注于现场,而不是意大利面。
旋转
旋转拉入最新新闻从使用主干模型和集合将其内部API连接到其站点,以及习俗同步方法。因为音乐不应该停止播放,即使您点击不同的“页面”,Spin也使用主干路由器用于在站点内导航。
ZocDoc公司
ZocDoc公司帮助患者查找本地网络医生和牙医,查看他们的实时信息可用性和即时预约。在公共端,webapp使用Backbone.js处理客户端状态并在搜索页面和医生简介.此外,该网站新版本的医生扮演部分是一个大型单页应用程序得益于Backbone的结构和模块化。ZocDoc的主干类用测试茉莉花,并已交付给最终用户盒式磁带.
沃尔玛移动
沃尔玛使用Backbone.js创建新版本属于他们的移动web应用程序和在此过程中创建了两个新框架。胸部提供mixin,可继承事件以及与直接集成的模型和集合视图绑定把手模板。腰椎允许应用程序分为可按需加载的模块,并创建特定于平台的构建用于嵌入沃尔玛本地安卓系统的web应用程序部分和iOS应用程序。
Groupon现在!
Groupon马上!帮助您找到您可以立即购买和使用的本地交易。首次开发时该团队决定,该产品将采用AJAX,过渡平稳而不是完全刷新,但仍需要完全刷新可链接和共享。尽管以前从未使用过Backbone学习曲线非常快-一个原型在下午,团队能够在两周内发货。由于源代码是最小的并且可以理解,因此很容易为Groupon Now!添加几个主干扩展:更改路由器使用querystring参数处理URL,并添加一个简单的用于缓存相同数据的重复请求的内存中存储。
大本营
37信号选择Backbone.js创建这个日历功能第个,共个流行的项目管理软件大本营.Basecamp日历将Backbone.js模型和视图与生态模板系统提供一个精致、高度交互式的组调度界面。
奴隶制足迹让消费者想象他们的消费习惯与现代奴隶制有关,并为他们提供了机会与制造他们购买的货物。总部位于加利福尼亚州奥克兰的奴隶制足迹团队致力于个人、团体和企业建立意识并创造针对强迫劳动、人口贩运和现代的可部署行动通过在线工具以及离线社区教育和动员计划。
条纹
条纹提供用于接受的API网上的信用卡。条纹的管理界面是最近使用Backbone.js作为主脚本在CoffeeScript中从头开始重写框架,生态对于模板,萨斯用于样式表,以及缝合到包装作为通用JS模块。新应用程序使用Stripe的API直接用于其大多数行动;Backbone.js模型使映射变得简单客户端模型到其相应的RESTful资源。
Airbnb公司
Airbnb公司在其许多产品中使用Backbone。它开始于Airbnb移动网络(由三人团队在六周内建成),此后已发展到心愿单,匹配,搜索、社区、支付和内部工具。
SoundCloud移动
声音云是领先的声音共享而Backbone.js为SoundCloud移动。该项目使用公共SoundCloud美国石油学会作为数据源(通过nginx代理传输),jQuery模板用于渲染,群尼特和幻影JS对于测试套件。JS代码、模板和CSS是为使用各种Node.js工具进行生产部署,如就绪.js,满意的,jsdom(jsdom).这个骨干。历史被修改为支持HTML5历史.pushState.主干网同步扩展了附加的基于SessionStorage的缓存层。
艺术·西
艺术·西是一个发现艺术的地方爱。Art.sy构建在Rails上,使用葡萄为健壮的人服务JSON API。主站点是一个页面应用程序用CoffeeScript编写,并使用Backbone提供周围的结构此API。管理面板和合作伙伴CMS也已提取到他们自己的API消费骨干项目。
潘多拉星球
什么时候?潘多拉星球重新设计的他们的HTML5网站,他们选择了Backbone.js来帮助管理用户界面和交互。例如,有一个模型表示“当前正在播放的曲目”,以及当前曲目更改时自动更新。电台列表是收集,以便在添加或更改电台时,UI保持最新。
墨水
墨水是一种跨平台的方式发布交互式学习内容。网络墨水使用Backbone.js制作数百本复杂的书籍,从学生教科书到旅游指南编程手册-吸引人并可在web上访问。喷墨支架支持WebGL的3D图形、交互式评估、社交共享、,和一个正确运行实践代码的系统在书中,所有这些都在一个单页Backbone-driven应用程序中。早些时候团队决定只使用Backbone.js和原始JavaScript。结果如何?完整的源代码只需350kb,在iPad、iPhone和web客户端上实现功能完整性。试试看这段摘自JavaScript:The Definitive Guide.
代码学校
代码学校课程教人关于各种编程主题,如咖啡脚本、CSS、Ruby on Rails、,等等。新的Code School课程质询页面在Backbone.js上从头开始构建,使用它提供的一切:路由器、集合、模型和复合体事件处理。以前,页面是一片混乱jQuery(jQuery)DOM操作以及手动Ajax调用。Backbone.js帮助引入了一种新的考虑用JavaScript开发一个有组织的前端应用程序。
云应用程序
云应用程序是简单的文件和链接Mac共享。Backbone.js支持web工具它消耗了记录的API管理Drop。数据可以手动拉取或推送推进器并喂给胡子模板渲染。请查看带注释的源代码去看魔术。
SeatGeek公司
SeatGeek公司的体育场门票地图原本是用开发的原型.js.移动到Backbone.js和jQuery(jQuery)帮助组织大量的UI代码,增加的结构使添加的功能容易多了。SeatGeek也在开发手机从上到下为Backbone.js的接口。
画架
画架是浏览器内的高保真网络与您的设计和开发集成的设计工具过程。Easel团队使用CoffeeScript、Underscore.js和Backbone.js他们的丰富的可视化编辑器以及其他整个现场的管理职能。允许的主干结构团队将把构建可视化编辑器的复杂问题分解为可管理的组件,并且仍能快速移动。
乔里克劳德
乔里克劳德是一个开放和独立的平台和操作系统提供音乐播放、视频流、照片浏览和文档编辑&将低成本计算机转变为漂亮的云设备。这个新Jolicloud HTML5应用程序已建成从头开始使用Backbone并与Jolicloud平台,这是基于Node.js。Jolicloud使用HTML5 AppCache离线工作,扩展Backbone.sync将数据存储在IndexedDB或localStorage中,并进行通信使用Joli操作系统通过WebSockets。
沙龙.io
沙龙.io为摄影师提供了一个空间,艺术家和设计师在虚拟墙上自由安排他们的视觉艺术。沙龙.io在上运行栏杆,但不使用许多传统堆栈,因为整个前端设计为单页网页应用程序,使用Backbone.js,早午餐和咖啡脚本.
瓦片厂
我们的伙伴骑士基金会新闻挑战赛获奖者,地图框,创建了一个开源地图设计工作室与Backbone.js:瓦片厂.TileMill允许您基于形状文件和光栅管理地图层,以及使用卡通造型语言.注意,华丽地图框主页也是Backbone.js应用程序。
开花
开花是轻量级项目管理精益团队的工具。Backbone.js与咖啡脚本以提供平滑互动体验。该应用程序与打包在一起早午餐.RESTful后端是用瓶在谷歌应用程序引擎上。
特雷略
特雷略是一种协作工具将项目组织到板中。Trello董事会有许多名单卡片,可以包含清单、文件和对话投票并用标签组织。板上的更新发生在实时。该网站是使用Backbone.js为所有模型、视图和管线。
西格拉
克里斯蒂·巴兰和伊琳娜·杜米特拉斯库创建西格拉,协作图艺术家制作相互连接的瓷砖的应用程序创造超现实主义绘画.主干模型有助于组织代码,路由器提供可添加书签的深层链接,视图用哈姆勒·杰斯和仄普托.Tzigla是用Ruby写的(栏杆)在后端,以及咖啡脚本在前端,使用贾米特预先打包静态资产。
更改日志
—2024年2月5日—差异—文件
- 添加了一个未找到事件到主干网历史记录当没有路由器与当前URL匹配。
- 添加了调试信息函数使错误报告更容易。
- 修复了集合将转发的角落案例错误如果模型首先通过创造方法等待:true.
- 添加了问题模板和其他文档改进。
—2023年7月28日—差异—文件
- 添加了一个拖曳斜杠选项主干网历史记录启动方法。当此选项为真的,的尾部斜杠根总是保留在路由中,即使当前URL的路径段是为空。
- 修复了导致收集的错误添加事件包括不相关的选项索引如果在同一个呼叫集合.set.
- 修复了集合无法转发的角落案例这个错误事件,如果集合.创建已调用具有{wait:true}.
- 将CoffeeScript模型测试改编为CoffeeScript版本2。
- 增加了安全政策和行为准则。
- 添加了一个.editorconfig(编辑器配置)为了促进跨编辑器的一致空白处理。
- 对文件进行了许多澄清、更正和完善,以及一些代码注释。
—2022年2月26日—差异—文件
- 改进了对多态集合的支持,其中有两个或多个模型类型可能不同id属性第条。集合.modelId()覆盖现在可以利用以下事实内部方法传递id属性作为第二个参数模型ID.
- 修复了集合内部的临时不一致模型期间的管理改变事件。模型(和依据扩展,集合)现在发出一个专门的更改Id事件当id更改时。
- 修复了ES6类或对象方法不能用作这个模型由于缺少原型.
- 使用GitHub操作和跨浏览器恢复持续集成使用Sauce Labs进行测试。
- 对在线文档进行了几项改进。
- 由于升级了开发工具,示例的注释源代码代码以及缩小捆绑包的源映射都已更改文件名。保留旧位置中的别名和重定向向后兼容性。
—2019年2月19日—差异—文件
- 集合现在支持Javascript迭代器协议!
-
倾听使用侦听对象的公共在方法。这有助于维护主干网和其他事件之间的互操作性库(包括Node.js)。
- 添加了对在中的构造函数之前设置实例属性的支持ES2015课程用一个预初始化方法。
-
收藏.get现在检查obj是否为模型允许使用attributes键检索模型。
- 修复了路由器的URL哈希和解析的几个问题。
—2016年4月5日—差异—文件
- 补充查找索引和查找最后索引底层方法收藏.
- 补充选项.更改到收藏“更新”事件包括添加、合并和删除的模型。
- 添加了对的支持系列#mixin和型号#mixin.
- 有保证的集合#减少和集合#reduceRight在没有首字母的情况下工作蓄电池值。
- 有保证的集合#_removeModels始终返回数组。
- 修复了一个错误,其中事件.once对象语法无法绑定上下文。
- 固定的集合#_onModelEvent回归,其中触发改变没有模型将出错。
- 固定的集合#集合回归时间解析返回一个错误的值。
- 固定的型号#id回归,其中身份证件将是无意中未定义.
- 固定的_删除模型可能导致无限循环的回归在某些条件下。
- 远离的成分包支持。
- 请注意,1.3.3修复了版本1.3.0到1.3.2中的几个错误。请升级如果您使用其中一个版本,请立即使用。
—2015年9月3日—差异—文件
- 修复了1.2.2中的小回归,该回归在添加时会导致错误集合的模型在越界索引。
—2015年8月19日—差异—文件
- 收集方法找到,滤波器,拒绝,每一个,一些、和隔板现在可以采用model-attributes-style谓词:this.collection.reject({用户:guybrush}).
- 主干事件再次支持多事件映射(对象打开({错误更改:操作})). 这是以前的1.2.0中无意中删除了未记录的功能。
- 补充系列#包括作为的别名第号集合包含作为替代品系列#includeUnderscore.js中>=1.8。
—2015年6月4日—差异—文件
-
集合#添加现在可以避免在传递时解析模型实例解析:false.
- 修复了错误集合#删除。删除的模型现在实际返回。
-
型号#fetch传递时不再解析响应解析:false.
- 与JSDOM一起使用时基于ifram-based History的错误修复。
- 错误修复位置集合#调用没有接受其他参数。
- 使用时在使用事件映射,现在可以将上下文作为第二个参数。这是以前无意中未记录的功能在1.2.0中删除。
—2015年5月13日—差异—文件
- 向视图添加了新的挂钩,以允许它们在没有jQuery的情况下工作。请参阅wiki页面了解更多信息。
- 作为一个整洁的副作用,Backbone。历史记录不再使用jQuery事件方法pushState(推送状态)和hash更改听众。我们自始至终都是土生土长的。
- 同样关于jQuery,如果您正在使用Backbone和CommonJS(node、browserify、webpack)Backbone将自动尝试为您加载jQuery。
- 视图现在总是将其事件委托给setElement(设置元素).您不能再修改事件哈希或视图埃尔中的属性初始化.
- 添加了一个“更新”在任意数量的从集合中添加或删除模型。方便重新阅读列表没有放松。
-
集合#位于可以取负指数。
- 补充模型ID到集合以在上生成唯一ID多态集合。当您的模型ID将否则会发生碰撞。
- 添加了一个可重写项_isModel(isModel)用于更高级的控制您的收藏所认为的模型。
- 这个成功回调传递给型号#destroy总是现在异步调用。
-
路由器#执行传回路由名称作为其第三个参数。
- 返回以取消当前路由器转换假在里面路由器#执行.非常适合检查登录状态或其他前提条件。
- 补充获取搜索和获取路径方法到主干。历史记录为跨浏览器和可覆盖的分割URL的方法。
- 补充代表和取消委派作为细粒度版本属于委托事件和取消LegateEvents。对插件有用作者在Backbone中使用一致的事件接口。
- 如果集合的顺序实际上是更新了,不是每个设置.
- 任何通过的选项属性现在,在保存模型时补丁:true.
-
集合#克隆现在设置模型和比较器克隆集合到新集合的函数。
- 在指定在位置现在发送模型在中的实际位置添加事件,而不仅仅是你传入的事件。
-
集合#删除现在将只返回以下型号的列表已从集合中删除。
- 固定加载严格的ES2015模块加载程序中的Backbone.js。
—2014年2月20日—差异—文件
- 主干网不再尝试在Node/CommonJS环境中要求jQuery,以更好地与使用Browserify的用户兼容。如果您想让Backbone使用Node中的jQuery,请这样分配:主干。$=require('jquery');
- 修复了路由参数中包含换行符的错误。
—2014年2月13日—差异—文件
- 主干现在为AMD(Require.js)、Bower和Component注册,以及CommonJS模块和常规(Java)脚本。呼。
- 添加了一个执行钩住路由器,允许您钩住in和custom-parse路由参数,例如查询字符串。
- 主干事件的性能微调。
- 在旧浏览器中,在路由中更好地匹配Unicode。
- 骨干路由器现在处理路由片段中的查询参数,通过它们作为最后一个参数进入处理程序。指定为的路由字符串不应再包含查询字符串(“foo?:查询'应该是“foo”(foo)).
—2013年10月10日—差异—文件
- 生成集合的返回值设置,添加,去除、和重置更有用。而不是返回这,他们现在返回已更改(添加、删除或更新)的模型或模型列表。
- 主干视图不再自动附加传递给构造函数的选项this.选项和主干模型不再连接网址和URL根选项,但如果你愿意,你可以自己做。
- 全部“无效”事件现在传递一致的参数。首先是有问题的模型,然后是错误对象,然后是选项。
- 您不再被允许更改身份证件您的模型在解析.使用id属性而不是。
- 另一方面,解析现在是一个提取并将传入的嵌套JSON生动化到关联的子模型中。
- 许多与Backbone 1.0相关的调整、优化和错误修复,包括URL覆盖、选项变异、批量排序、尾部斜杠、边缘事例侦听器泄漏、嵌套模型解析。。。
—2013年3月20日—差异—文件
- 将收藏的“更新”重命名为设置,用于与同类产品的并行性model.set(),并与重置。现在是默认值a之后的更新机制取来如果你愿意喜欢继续使用“重置”,通过{重置:true}.
- 您的路由处理程序现在将接收其预先编码的URL参数。
- 补充只听一次类似于一旦.
- 添加了查找位置方法到集合,类似哪里.
- 添加了钥匙,值,对,使转化,挑选、和省略Underscore.js方法到主干模型。
- 路由器路由图中的路由现在可能是函数文字,如果你愿意的话,不要引用方法。
-
网址和URL根属性现在可以作为选项传递实例化新模型时。
—2013年1月15日—差异—文件
- A类“路由”事件也会在路由器上触发被解雇主干网历史记录.
- 模型验证现在仅在默认情况下强制执行型号#保存并且不再默认强制执行构造或中型号集合,除非{validate:true}选项被传递。
-
查看#make已删除。你需要使用$直接发送到现在构造DOM元素。
- 经过{silent:真}改变将不再延迟个人“更改:属性”相反,他们完全沉默了。
- 这个型号变更方法已作为延迟属性删除更改不再可用。
- 上的错误修复改变属性比较使用的位置!==而不是_.等于.
- 修复了保存时服务器的空响应不会调用的错误成功功能。
-
解析现在接收选项作为第二个论点。
- 模型验证现在启动无效事件,而不是错误.
—2012年12月13日—差异—文件
- 补充倾听和停止收听至活动。他们可用于控制在和远离的,为了方便解除对象当前正在侦听的所有事件的绑定。view.remove()自动呼叫view.stopListing().
- 使用时添加收集,传递{合并:true}现在将导致重复模型的属性合并到现有模型,而不是被忽略。
- 补充更新(也可作为选择取来)用于“智能”更新模型集。
- 超文本传输协议补丁中的支持节约旁路{补丁:true}.
- 这个骨干对象现在扩展事件这样你就可以如果您愿意,可以将其用作全局事件总线。
- 添加了一个“请求”事件到主干网同步,每当向服务器发出请求时都会触发。对“同步”事件。
- 路由器URL现在通过括号支持可选部分,而没有使用正则表达式。
- 主干事件现在支持一旦,类似于节点的一旦,或jQuery的一.
- 主干事件现在支持jQuery-style事件映射obj.on({点击:操作}).
- 在听重置事件,先前模型的列表现在在中可用选项.以前的型号,为方便起见。
-
验证现在甚至在“沉默”期间也会发生变化。此更改意味着是否有效方法具有已删除。验证失败也会触发错误,即使出现错误回调在选项中指定。
- 加固的“同步”和“错误”中的事件主干网同步。它们现在被触发,无论的存在成功或错误回调。
- 对于混合模式API,主干网同步现在接受模拟HTTP和模拟JSON作为内联选项。
- 集合现在还代理Underscore方法名称别名(collect,注射、折叠、折叠、头部、尾部、服用等……)
- 远离的按Cid获取收藏。收藏.get现在支持两者查找身份证件和cid公司.
- 获取模型或集合后,全部的定义解析现在将运行函数。因此,获取收藏并重新获得新的模型可能会导致集合解析列表,然后是每个模型如果定义了这两个函数,则依次进行解析。
- 用于规范路由器中的前导斜杠和尾随斜杠的Bugfix定义。他们的存在(或不存在)不应影响行为。
- 声明视图时,选项,埃尔,标记名,身份证件和类名现在可以定义为函数,如果您希望在运行时确定它们的值。
- 添加了一个主干.ajax挂钩可更方便地覆盖默认使用$.ajax(美元)如果AJAX太过时,请将其设置为服务器通信的首选方法。
-
集合#排序现在触发一个分类事件,而不是的重置事件。
- 打电话破坏现在将返回模型上的假如果模型是新的.
- 要设置Backbone用于DOM操作和Ajax调用的库,使用Backbone.$=。。。而不是setDomLibrary(设置域库).
- 删除了Backbone.wrap错误helper方法。覆盖同步对于那些特定的用例应该工作得更好。
- 为了提高添加,选项索引将不再在中设置添加事件回调。collection.indexOf(模型)可用于检索索引根据需要对模型进行调整。
- 出于语义和跨浏览器的原因,路由现在将忽略搜索参数。路线如搜索?查询=…&page=3应该成为搜索/…/3.
-
型号集合不再接受另一个模型作为参数。这条线索很容易被替换为model.set(其他属性).
—2012年3月21日—差异—文件
- 在向集合添加重复模型时,不会抛出错误,主干现在将自动跳过它们。
- 补充推,流行音乐,取消移位、和转移到集合。
- 一个模型的改变哈希现在已为公开自模型的上一次更改以来,很容易读取更改后的属性delta“更改”事件。
- 补充哪里到简单集合过滤。
- 您现在可以使用单个远离的呼叫删除绑定到特定对象的所有回调。
- 针对嵌套单个更改事件的错误修复,其中一些可能是“沉默”。
- 中URL编码的错误修复位置哈希碎片。
- 客户端验证之前的错误修复节约呼叫具有{等待:true}.
- 更新/刷新示例事項清單应用程序。
—2012年2月2日—差异—文件
- 已恢复到0.5.3-esque行为以验证模型。无提示更改不再触发验证(更容易使用表单)。添加了一个是否有效可用于检查模型是否当前处于有效状态。
- 如果页面上有多个版本的jQuery,您现在可以知道使用哪一个主干Backbone.setDom库.
- 修复中的回归0.9.0对于带有“root”的路由,使用保存“等待”和“验证”,以及嵌套的“更改”事件的顺序。
—2012年1月30日—差异—文件
- 使用创建和销毁模型创造和破坏现在默认情况下是乐观的。通过{等待:true}作为选项如果您希望他们等待成功的服务器响应继续。
- 视图上的两个新属性:美元-缓存的jQuery(或Zepto)对视图元素的引用,以及setElement(设置元素),应该是而不是手动设置视图埃尔。它会的两套视图.el和视图$埃尔正确,以及重新传送新DOM元素上的事件。
- 现在可以一次绑定和触发多个空格分隔的事件。例如:model.on(“更改:名称更改:年龄”,…)
- 如果你事先不知道钥匙,现在可以打电话model.set(键、值)以及节约.
- 具有相同的多个模型身份证件不再允许在单个集合。
- 添加了一个“同步”事件,无论何时模型的状态都会触发已成功与服务器同步(创建、保存、销毁)。
-
绑定和解除绑定已重命名为在和远离的为了清楚起见,遵循jQuery的领导。旧名称也仍然受支持。
- 主干系列比较器函数现在可能会运行要么像排序依据(传递接受单个参数的函数),或类似于分类(传递一个需要两个参数的比较器函数)。比较器函数现在也默认绑定到集合-因此您可以参考这在它里面。
- 一个视图的事件散列现在也可以包含直接函数值以及现有视图方法的字符串名称。
- 验证已进行彻底检查-模型验证功能现在将运行,即使是无提示更改,您也无法再创建处于初始无效状态的模型。
- 补充洗牌和最初的到集合,代理从Undercore。
-
型号#urlRoot现在可以定义为函数以及值。
-
查看#属性现在可以定义为函数以及值。
- 打电话取来集合上的将导致所有提取的JSON要运行集合的模型解析函数,如果一个是定义的。
- 你现在可以告诉路由器导航(片段,{replace:true}),要么使用历史记录.替换状态或位置.哈希.替换,以便在不添加的情况下更改URL历史记录条目。
- 在集合中添加和去除事件,索引正在添加或删除的模型的选项索引.
- 添加了一个取消LegateEvents到视图,允许您手动删除所有配置的事件委派。
- 尽管无论如何你都不应该用他们写你的路线-前导斜杠(/)现在已从路线中剥离。
- 打电话克隆在模型上,现在只传递属性用于复制,而不是引用模型本身。
- 打电话清楚的现在在模型上删除身份证件属性。
—2011年8月9日—差异—文件
A视图事件属性现在也可以定义为函数作为对象文字,更容易通过编程定义和继承事件。分组依据现在从Undercore代理为Collections上的方法。如果服务器已经在页面加载时呈现了所有内容,请传递Backbone.history.start({silent:true})阻止最初的路线使用编码URL触发pushState的.Bugfix。
—2011年7月26日—差异—文件
这个绑定函数,现在可以使用可选的第三个参数来指定这个这回调函数的。具有相同的多个模型身份证件现在允许在集合中使用。修复了呼叫时的错误.fetch(jQueryOptions)可能导致要序列化的URL不正确。修复了重定向前从降级时发生的短暂额外路由火灾pushState(推送状态).
—2011年7月5日—差异—文件
0.5.0版本的清理,即:改进了从pushState和vice-versa的基于hash的URL。修正了与传递给的非修改属性型号#初始化.已还原一0.5.0这将从路由中去除主要的hashbang。补充包含作为的别名包括.
—2011年7月1日—差异—文件
大量微小的调整和微小的错误修复,最好通过查看在提交差异.HTML5推送状态支持,通过以下选项启用:Backbone.history.start({pushState:true}).控制器已重命名为路由器,以便清楚。集合#刷新已重命名为集合#重置强调它既可以用新模型重置集合,也可以清空集合在不带参数的情况下使用集合。保存位置被替换为导航.RESTful持久性方法(save、fetch等)现在返回延迟的jQuery对象以进一步成功/错误链接和一般方便。改进的XSS转义型号#escape.添加了一个URL根选项允许指定RESTful url而不收藏的使用。如果出现以下情况,将引发错误主干网历史记录启动多次调用。集合#创建现在在初始化新模型之前进行验证。视图.el现在可以是jQuery字符串查找。主干视图现在也可以采用属性参数。型号默认值现在可以是函数和文字属性对象。
—2010年12月1日—差异—文件
Backbone.js现在支持仄普托,旁边jQuery,作为DOM操作和Ajax支持的框架。已实施型号#escape,以有效地处理用于HTML插值的属性。尝试持久化模型时,失败的请求现在将触发“错误”事件。这个无处不在的选项参数现在作为最终参数传递致所有人“更改”事件。
—2010年11月23日—差异—文件
修复了基于IE7+iframe的“hashchange”事件的错误。同步现在可能是基于每个模型或每个集合重写。修复了递归错误打电话时节约没有更改属性,在“更改”事件。
—2010年11月15日—差异—文件
全部“添加”和“删除”事件现在通过模型,以便视图可以侦听它们,而无需了解收藏。添加了一个去除方法到骨干。查看.到JSON不再为调用“读取”和'删除'请求。主干路由现在可以加载空的URL片段。
—2010年11月9日—差异—文件
主干现在有控制器和历史,用于基于URL片段。补充模拟HTTP为不支持做PUT(输出)和删除.补充模拟JSON无法接受的服务器应用程序/json编码的请求。补充型号#清除,删除所有属性来自模型。所有主干类现在都可以被CoffeeScript类无缝继承。
—2010年10月25日—差异—文件
而不是要求服务器响应在模型key,现在您可以定义自己的解析方法将响应转换为模型和集合的属性。老人处理事件函数现在已命名委托事件,并自动作为视图构造函数的一部分调用。添加了一个到JSON集合的函数。补充下芯链托收。
—2010年10月19日—差异—文件
添加了一个型号#fetch刷新的方法服务器中单个模型的属性。安错误回调现在可以传递给设置和节约作为选项,在验证失败时将调用该选项,覆盖“错误”事件。现在您可以告诉backbone使用_方法黑客而不是HTTP方法,通过设置Backbone.emulative HTTP=true.现有模型和集合数据不再不必要地与一起发送GET(获取)和删除请求。添加了一个耙绒任务。主干现在发布为净现值法模块。
—2010年10月14日—差异—文件
为添加了约定初始化要调用的函数实例构造时,如果已定义。文档调整。
—2010年10月13日—文件
初始主干版本。