Backbone is becoming increasingly popular as a web application development framework. With this popularity came countless extensions and plugins to enhance the functionality of the framework and fill in the holes that others felt needed to be filled. Let’s take a look at some of the best options.

Backbone.Puppet

Developed by Derick Bailey, this extension is quite large and is my personal favorite. Instead of adding a feature or two to Backbone, Derick decided to fill all of the biggest holes that he felt existed. Here’s what he said about it in the GitHub project’s readme.

"Backbone.Marionette is a composite application library for Backbone.js designed to simplify building large JavaScript applications. It is a collection of common design and implementation patterns discovered in applications I (Derick Bailey) have built using Backbone, and includes Various pieces inspired by composite application architecture, such as Microsoft's "Prism" framework."

Let’s take a closer look at what Marionette has to offer us:

• Application: This is the central object through which everything in the application communicates. It provides a quick and easy way to set up the main view of the application, a central event hub through which every module in the application can communicate so that they are not dependent on each other, and provides Initializer for granular control over how your application starts.
• Modules: A way to encapsulate module code and name these modules on a central application object.
• View: The new view class to extend provides native methods for cleanup so you don't end up with memory leaks. It also contains rendering templates; for simple views, just specify the template and model and it will take care of the rest.
• Collections/Composite Views: This is where the "Composite Application Library" comes into play. These two views allow you to easily create views that can handle the process of rendering all views in a collection, even nested hierarchies of collections and models, with very little effort.
• Regions and Layouts: A region is an object that handles all the work of rendering, unrendering, and closing views at a specific location in the DOM. A layout is just a normal view with built-in areas for working with subviews.
• AppRouter: A new type of router that can use a controller to handle the workload so that the router only contains the configuration of the route.
• Events: Marionette extends from the Wreqr project to make Backbone's events more powerful and can be used to create large-scale event-based applications.

I've only scratched the surface of what Marionette can do. I definitely recommend going to GitHub and reading their documentation on the wiki.

Additionally, Andrew Burgess covers Marionette in his Tuts Premium Advanced Backbone Patterns and Techniques course.

Backbone Network Verification

Backbone.Validation is designed to fill a small subset of problems: namely model validation. Backbone has multiple validation extensions, but this one seems to have gained the most respect from the community.

In fact, instead of writing a validate method for the model, you can create a validation property for the model, which is an object specifying each property you wish to validate and Rules that validate each attribute of the list. You can also specify error messages for each property and pass in a custom function to validate individual properties. You can see an example below, modified from one of the examples on their website.

var SomeModel = Backbone.Model.extend({
    validation: {
        name: {
            required: true
        },
        'address.street': {
            required: true
        },
        'address.zip': {
            length: 4
        },
        age: {
            range: [1, 80]
        },
        email: {
            pattern: 'email',
            // supply your own error message
            msg: "Please enter a valid email address"
        },
        // custom validation function for `someAttribute`
        someAttribute: function(value) {
            if(value !== 'somevalue') {
                return 'Error message';
            }
        }
    }
});

There are countless built-in validators and schemas you can check, and there's even a way to extend the list with your own global validator. This Backbone plugin doesn’t make validation fun, but it does remove any excuse for not adding validation. Please visit their website for more examples and more in-depth instructions on how to use this wonderful tool.

Backbone.LayoutManager

Backbone.LayoutManager is to make Backbone’s views better. Like Backbone.Marionette, it introduces cleanup code to prevent memory leaks, handles all boilerplate, and leaves you with only configuration and application-specific code. Unlike Marionette, LayoutManager focuses specifically on views.

Because LayoutManager only focuses on views, it can do more for views than Marionette. For example, LayoutManager is able to perform asynchronous rendering when you want to dynamically load a template from an external file.

LayoutManager can also handle subviews, albeit in a very different way than Marionette. But either way, it's mostly configuration, which makes things very simple and eliminates 90% of the work you'd need to do if you were trying to implement it all yourself. Take a look at the following simple example of adding three subviews to a view:

Backbone.Layout.extend({
    views: {
      "header": new HeaderView(),
      "section": new ContentView(),
      "footer": new FooterView()
    }
});

像往常一樣，請務(wù)必參閱 GitHub 頁面和文檔以了解更多信息。

Backbone.ModelBinder

Backbone.ModelBinder 在模型中的數(shù)據(jù)和視圖顯示的標(biāo)記之間創(chuàng)建鏈接。您已經(jīng)可以通過綁定到模型上的更改事件并再次渲染視圖來完成此操作，但 ModelBinder 更高效且更易于使用。

看一下下面的代碼：

var MyView = Backbone.View.extend({
    template: _.template(myTemplate),

    initialize: function() {
        // Old Backbone.js way
        this.model.on('change', this.render, this);
        // or the new Backbone 0.9.10+ way
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

這種方法的問題在于，每當(dāng)更改單個(gè)屬性時(shí)，我們都需要重新渲染整個(gè)視圖。此外，在每次渲染時(shí)，我們都需要將模型轉(zhuǎn)換為 JSON。最后，如果希望綁定是雙向的（當(dāng)模型更新時(shí)，DOM 也會更新，反之亦然），那么我們需要向視圖添加更多邏輯。

此示例使用 Underscore 的 template 函數(shù)。讓我們假設(shè)我們傳遞給它的模板如下所示：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName" value="<%= firstName %>">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName" value="<%= lastName %>">
</form>

使用標(biāo)簽 <%= 和 %> 使 template 函數(shù)將這些區(qū)域替換為我們從模型發(fā)送的 JSON 中存在的 firstName 和 lastName 屬性。我們假設(shè)該模型也具有這兩個(gè)屬性。

使用 ModelBinder，我們可以刪除這些模板標(biāo)簽并以普通 HTML 形式發(fā)送。 ModelBinder 將查看 input 標(biāo)記上的 name 屬性的值，并自動將該屬性的模型值分配給該標(biāo)記的 value 屬性。例如，第一個(gè) input 的 name 設(shè)置為“firstName”。當(dāng)我們使用 ModelBinder 時(shí)，它會看到這一點(diǎn)，然后將 input 的 value 設(shè)置為模型的 firstName 屬性。

下面，您將看到我們之前的示例在切換到使用 ModelBinder 后的外觀。另外，要意識到綁定是雙向的，因此如果 input 標(biāo)簽更新，模型將自動為我們更新。

HTML 模板：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName">
</form>

JavaScript 視圖：

var MyView = Backbone.View.extend({
    template: myTemplate,

    initialize: function() {
        // No more binding in here
    },

    render: function() {
        // Throw the HTML right in
        this.$el.html(this.template);
        // Use ModelBinder to bind the model and view
        modelBinder.bind(this.model, this.el);
    }
});

現(xiàn)在我們有了干凈的 HTML 模板，我們只需要一行代碼就可以使用 modelBinder.bind 將視圖的 HTML 和模型綁定在一起。 modelBinder.bind 采用兩個(gè)必需參數(shù)和一個(gè)可選參數(shù)。第一個(gè)參數(shù)是將綁定到 DOM 的數(shù)據(jù)的模型。第二個(gè)是將遞歸遍歷的 DOM 節(jié)點(diǎn)，搜索要進(jìn)行的綁定。最后一個(gè)參數(shù)是 binding 對象，如果您不喜歡默認(rèn)用法，它指定如何完成綁定的高級規(guī)則。

ModelBinder 不僅僅可以用于 input 標(biāo)簽。它適用于任何元素。如果元素是某種類型的表單輸入，例如 input、select 或 textarea，它將相應(yīng)地更新這些元素的值。如果您綁定到一個(gè)元素，例如 div 或 span，它會將模型的數(shù)據(jù)放置在該元素的開始和結(jié)束標(biāo)記之間（例如 <span name="firstName">[數(shù)據(jù)在此處] <span></span></span>)。

Backbone.ModelBinder 背后的功能比我在這里演示的要強(qiáng)大得多，因此請務(wù)必閱讀 GitHub 存儲庫上的文檔以了解所有相關(guān)信息。

結(jié)論

事情就這樣結(jié)束了。我只介紹了少數(shù)擴(kuò)展和插件，但這些是我認(rèn)為最有用的。

Backbone 格局在不斷變化。如果您想查看各種可用 Backbone 擴(kuò)展的完整列表，請?jiān)L問此 wiki 頁面，Backbone 團(tuán)隊(duì)會定期更新該頁面。

The above is the detailed content of Enhance trunk with extensions to improve experience. For more information, please follow other related articles on the PHP Chinese website!