save() 函数将在后台委托给 Backbone.sync，这是负责发出 RESTful 请求的组件，默认使用 jQuery 函数 $.ajax()。由于调用了 REST 风格架构，每个 Create、Read、Update 或 Delete (CRUD) 活动均会与各种不同类型的 HTTP 请求（POST、GET、PUT 和 DELETE）相关联。首先保存模型对象，使用一个 POST 请求，创建一个标识符 ID，其后，尝试发送对象到服务器，使用一个 PUT 请求。
当需要从服务器检索一个模型时，请求一个 Read 活动并使用一个 Ajax GET 请求。这类请求使用 fetch() 方法。要确定导入模型数据或者从中取出模型数据的服务器的位置：
显示了如何获取一个模型。
清单 10. 模型对象的 Fetch() 方法var teamNew = new App.Models.Team({ urlRoot : '/specialTeams' }); teamNew.save(); // returns model's ID equal to '222' teamNew.fetch(); // Ajax request to '/specialTeams/222'
validate() 方法被用于验证模型，如 所示。需要重写 validate() 方法（在调用 set() 方法时触发）来包含模型的有效逻辑。传递给该函数的惟一参数是一个 JavaScript 对象，该对象包含了 set() 方法更新的属性，以便验证那些属性的条件。如果从 validate() 方法中没有返回任何内容，那么验证成功。如果返回一个错误消息，那么验证失败，将无法执行 set() 方法。
清单 11. 模型的验证方法App.Models.Team = Backbone.Model.extend({ validate : function(attributes){ if (!!attributes && attributes.name === "teamX") { // Error message returned if the value of the "name" // attribute is equal to "teamX" return "Error!"; } } }
一组模型被分组到到集合中，这个集合是 Backbone.Collection 的扩展函数。集合具有一个模型属性的特性，定义了组成该集合的模型类型。使用 add()/remove() 方法可以将一个模型添加和移动到集合中。 显示了如何创建和填充一个集合。
清单 12. Backbone 集合App.Collections.Teams = Backbone.Collection.extend({ model : App.Models.Team }); var teams = new App.Collections.Teams(); // Add e model to the collection object "teams" teams.add(team1); teams.add(new App.Models.Team({ name : "Team B" })); teams.add(new App.Models.Team()); teams.remove(team1); console.log(teams.length) // prints 2
创建的 teams 集合中包含一个含有两个模型的阵列，存储在模型属性中。尽管，在典型 Ajax 应用程序中，会从服务器动态（不是人工）填充该集合。fetch() 方法可以帮助完成此项任务，如 所示，并将数据存储到模型阵列中。
清单 13. Fetch() 方法teams.fetch();
Backbone 中的集合拥有一个 url 属性，定义了使用 Ajax GET 请求从服务器取出 JSON 数据的位置，如 所示。
清单 14. 集合的 url 属性和 fetch() 方法teams.url = '/getTeams'; teams.fetch(); //Ajax GET Request to '/getTeams'
Fetch() 方法属于异步调用，因此，在等待服务器响应时，应用程序不会中止。在一些情况下，要操作来自服务器的原始数据，可以使用集合的 parse() 方法。正如 所示。
清单 15. parse() 方法App.Collections.Teams = Backbone.Collection.extend({ model : App.Models.Team, parse : function(data) { // 'data' contains the raw JSON object console.log(data); } });
集合提供的另一个有趣的方法是 reset()，它允许将多个模型设置到一个集合中。reset() 方法可以非常方便地将数据引导到集合中，比如页面加载，来避免用户等待异步调用返回。
视图和客户端模板Backbone 中的视图与典型 MVC 方法的视图不一样。Backbone 视图可以扩展 Backbone.View 函数并显示模型中存储的数据。一个视图提供一个由 el 属性定义的 HTML 元素。该属性可以是由 tagName、className 和 id 属性相组合而构成的，或者是通过其本身的 el 值形成的。 显示了使用这不同方法组合 el 属性的两个不同视图。
清单 16. Backbone 视图样例// In the following view, el value is 'UL.team-element' App.Views.Teams = Backbone.View.extend({ el : 'UL.team-list' }); // In the following view, el value is 'div.team-element' App.Views.Team = Backbone.View.extend({ className : '.team-element', tagName : 'div' });
如果 el、tagName、className 和 id 属性为空，那么会默认将一个空的 DIV 分配给 el。
如上所述，一个视图必须与一个模型相关联。该模型属性也很有用，如 所示。App.View.Team 视图被绑定到一个 App.Models.Team 模型实例。
清单 17. Backbone 视图中的模型属性// In the following view, el value is 'UL.team-element' App.Views.Team = Backbone.View.extend({ ... model : new App.Models.Team });
要渲染数据（这是视图的主要目的），重写 render() 方法和逻辑来显示 DOM 元素（由 el 属性引用的）中的模型属性。 展示了一个 render 方法如何更新用户界面的样例。
清单 18. Render() 方法App.Views.Team = Backbone.View.extend({ className : '.team-element', tagName : 'div', model : new App.Models.Team render : function() { // Render the 'name' attribute of the model associated // inside the DOM element referred by 'el' $(this.el).html("<span>" + this.model.get("name") + "</span>"); } });
Backbone 也可以促进客户端模板的使用，这就使得我们没有必要在 JavaScript 中嵌入 HTML 代码，如 所示。（使用模板，模板会封装视图中常见函数；只指定此函数一次即可。）Backbone 在 underscore.js（一个必须的库）中提供一个模板引擎，尽管没有必要使用该模板引擎。 中的实例使用 underscore.js HTML 模板。
清单 19. HTML 含有模板<script type="text/template"> <%= name %> </script>
显示了另一个使用 underscore.js HTML 模板的样例。
清单 20. 使用 _.template() 函数的视图
相关文章
精彩导读
热门资讯
关注我们
