Backbone.js 是一个轻量级的前端框架,它提供了一系列工具来帮助开发人员构建可扩展和易于维护的单页应用程序。其中包括路由,可以根据 URL 监听浏览器导航,并在特定 URL 和应用程序状态之间进行交互。
在 Backbone.js 中,路由定义为一个集合,其中每个元素表示应该匹配哪个 URL 模式,并且在匹配时调用特定的处理程序。此外,您可以使用正则表达式或命名占位符来指定 URL 模式的参数。
然而,有时您可能需要为某些参数提供默认值或将其设置为可选参数。这是通过在路由模式中添加问号来实现的。
可选参数的语法
可选参数是用问号(“?”)表示的,后跟参数名称。例如,以下路由模式可以匹配 URL “/books” 或 “/books?category=bestseller”。
routes: { "books": "showBooks", "books?:category": "showBooks" }
在路由处理程序中,您可以通过访问 params
对象来检索可选参数。如果 URL 包含可选参数,则它将作为 params
对象的属性。
showBooks: function (params) { var category = params.category || "all"; // ... }
在上面的示例中,如果 URL 中不包含 category
参数,则默认值为 “all”。
示例:使用可选参数过滤图书
让我们通过一个简单的示例来说明如何使用 Backbone.js 路由中的可选参数。假设您正在构建一个在线书店应用程序,并希望用户能够根据类别过滤图书列表。
首先,定义一个 Book 模型,其中包含标题和类别属性。
var Book = Backbone.Model.extend({ defaults: { title: "", category: "" } });
然后,创建一个 Book 集合,其中包含要显示的所有图书。
var books = new Backbone.Collection([ new Book({title: "The Lord of the Rings", category: "fantasy"}), new Book({title: "To Kill a Mockingbird", category: "classic"}), new Book({title: "1984", category: "dystopian"}), new Book({title: "The Catcher in the Rye", category: "classic"}) ]);
接下来,创建一个视图,它将呈现图书列表并允许用户选择类别过滤器。
-- -------------------- ---- ------- --- --------- - ---------------------- --- --------- ------- - ------- ------------------ ---------------- -- ----------- -------- -- - -------------------- --------- ------------- -- ------- -------- -- - --- -------- - --------------------------------- --- ------------- - -------- - ---------------------- ---------- - ------------- --- -------- - ---------------------------------------- ------------------------------------------- ----------------- -- --------------- -------- -- - -------------- - --- --- ------------
最后,定义路由,它将处理类别过滤器的可选参数并调用视图的 render
方法。
-- -------------------- ---- ------- --- ------ - ------------------------ ------- - --- ------- ------------------ ------- -- ----- -------- -- - --------------------------- -- --- ------------- -- ------ -------- -------- - --- ------------ - --- --- --------- -------------------------
在上面的示例中,当用户浏览到 URL “/books?category=classic” 时,路由将匹配 books
路由模式,并传递 {category: "classic"}
作为 params
对象。视图将使用此参数来过滤图书
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/26092