Améliorez le coffre avec des extensions pour améliorer l'expérience

Backbone devient de plus en plus populaire en tant que framework de développement d'applications Web. Cette popularité est venue avec d'innombrables extensions et plugins pour améliorer les fonctionnalités du framework et combler les lacunes que d'autres estimaient devoir combler. Jetons un coup d’œil à certaines des meilleures options.

---

Backbone.Puppet

Développée par Derick Bailey, cette extension est assez volumineuse et est ma préférée. Au lieu d’ajouter une ou deux fonctionnalités à Backbone, Derick a décidé de combler tous les plus gros trous qui, selon lui, existaient. Voici ce qu’il en a dit dans le fichier readme du projet GitHub.

"Backbone.Marionette est une bibliothèque d'applications composites pour Backbone.js conçue pour simplifier la création de grandes applications JavaScript. Il s'agit d'un ensemble de modèles de conception et d'implémentation courants découverts dans les applications que j'ai (Derick Bailey) créées à l'aide de Backbone, et comprend diverses parties inspirées de architecture d'application composite, telle que le framework « Prism » de Microsoft »

.

Regardons de plus près ce que Marionette a à nous offrir :

• Application : C'est l'objet central à travers lequel tout communique dans l'application. Il fournit un moyen simple et rapide de configurer la vue principale de l'application, un hub d'événements central à travers lequel chaque module de l'application peut communiquer afin qu'ils ne dépendent pas les uns des autres, et fournit un initialiseur pour un contrôle granulaire sur la façon dont votre application démarre.
• Modules : Un moyen d'encapsuler le code des modules et de nommer ces modules sur un objet d'application central.
• Views : La nouvelle classe de vues à étendre fournit des méthodes natives de nettoyage afin que vous ne vous retrouviez pas avec des fuites de mémoire. Il contient également des modèles de rendu ; pour des vues simples, spécifiez simplement le modèle et le modèle et il s'occupera du reste.
• Collections/Vues composites : C'est là que la bibliothèque d'applications composites entre en jeu. Ces deux vues vous permettent de créer facilement des vues capables de gérer le processus de rendu de toutes les vues d'une collection, même des hiérarchies imbriquées de collections et de modèles, avec très peu d'effort.
• Régions et mises en page : Une région est un objet qui gère tout le travail de rendu, d'annulation du rendu et de fermeture des vues à un emplacement spécifique du DOM. Une mise en page n'est qu'une vue normale avec des zones intégrées permettant de travailler avec des sous-vues.
• AppRouter : Un nouveau type de routeur qui peut utiliser un contrôleur pour gérer la charge de travail afin que le routeur ne contienne que la configuration de la route.
• Événements : Marionette s'étend du projet Wreqr pour rendre les événements de Backbone plus puissants pour créer des applications basées sur des événements à grande échelle.

Je n’ai fait qu’effleurer la surface de ce que Marionette peut faire. Je recommande vivement d'aller sur GitHub et de lire leur documentation sur le wiki.

De plus, Andrew Burgess couvre Marionette dans son cours Tuts+ Premium Advanced Backbone Patterns and Techniques.

---

Vérification du réseau principal

Backbone.Validation vise à combler un petit sous-ensemble de problèmes : à savoir la validation de modèle. Backbone possède plusieurs extensions de validation, mais celle-ci semble avoir gagné le plus de respect de la communauté.

Vous n'êtes en fait pas obligé d'écrire un attribut validate 方法，而是可以为模型创建 validation pour votre modèle, qui est un objet spécifiant chaque attribut que vous souhaitez valider et les règles de validation de chaque attribut de la liste. Vous pouvez également spécifier un message d'erreur pour chaque propriété et transmettre une fonction personnalisée pour valider les propriétés individuelles. Vous pouvez voir un exemple ci-dessous, modifié à partir de l'un des exemples sur leur site Web.

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';
            }
        }
    }
});

Il existe d'innombrables validateurs et schémas intégrés que vous pouvez vérifier, et il existe même un moyen d'étendre la liste avec vos propres validateurs globaux. Ce plugin Backbone ne rend pas la validation amusante, mais il supprime toute excuse pour ne pas ajouter de validation. Veuillez visiter leur site Web pour plus d'exemples et des instructions plus détaillées sur la façon d'utiliser ce merveilleux outil.

---

Backbone.LayoutManager

Backbone.LayoutManager vise à améliorer les vues de Backbone. Comme Backbone.Marionette, il introduit un code de nettoyage pour éviter les fuites de mémoire, gère tous les passe-partout et vous laisse uniquement le code de configuration et spécifique à l'application. Contrairement à Marionette, LayoutManager se concentre spécifiquement sur les vues.

Étant donné que LayoutManager se concentre uniquement sur les vues, il peut faire plus pour les vues que Marionette. Par exemple, LayoutManager est capable d'effectuer un rendu asynchrone lorsque vous souhaitez charger dynamiquement un modèle à partir d'un fichier externe.

LayoutManager peut également gérer les sous-vues, bien que d'une manière très différente de Marionette. Mais quoi qu'il en soit, il s'agit principalement de configuration, ce qui rend les choses très simples et élimine 90 % du travail que vous auriez besoin de faire si vous essayiez de tout mettre en œuvre vous-même. Voir ci-dessous un exemple simple d'ajout de trois sous-vues à une vue :

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

像往常一样，请务必参阅 GitHub 页面和文档以了解更多信息。

---

Backbone.ModelBinder

Backbone.ModelBinder 在模型中的数据和视图显示的标记之间创建链接。您已经可以通过绑定到模型上的更改事件并再次渲染视图来完成此操作，但 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()));
    }
});

这种方法的问题在于，每当更改单个属性时，我们都需要重新渲染整个视图。此外，在每次渲染时，我们都需要将模型转换为 JSON。最后，如果希望绑定是双向的（当模型更新时，DOM 也会更新，反之亦然），那么我们需要向视图添加更多逻辑。

此示例使用 Underscore 的 template 函数。让我们假设我们传递给它的模板如下所示：

<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>

使用标签 <%= 和 %> 使 template 函数将这些区域替换为我们从模型发送的 JSON 中存在的 firstName 和 lastName 属性。我们假设该模型也具有这两个属性。

使用 ModelBinder，我们可以删除这些模板标签并以普通 HTML 形式发送。 ModelBinder 将查看 input 标记上的 name 属性的值，并自动将该属性的模型值分配给该标记的 value 属性。例如，第一个 input 的 name 设置为“firstName”。当我们使用 ModelBinder 时，它会看到这一点，然后将 input 的 value 设置为模型的 firstName 属性。

下面，您将看到我们之前的示例在切换到使用 ModelBinder 后的外观。另外，要意识到绑定是双向的，因此如果 input 标签更新，模型将自动为我们更新。

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);
    }
});

现在我们有了干净的 HTML 模板，我们只需要一行代码就可以使用 modelBinder.bind 将视图的 HTML 和模型绑定在一起。 modelBinder.bind 采用两个必需参数和一个可选参数。第一个参数是将绑定到 DOM 的数据的模型。第二个是将递归遍历的 DOM 节点，搜索要进行的绑定。最后一个参数是 binding 对象，如果您不喜欢默认用法，它指定如何完成绑定的高级规则。

ModelBinder 不仅仅可以用于 input 标签。它适用于任何元素。如果元素是某种类型的表单输入，例如 input、select 或 textarea，它将相应地更新这些元素的值。如果您绑定到一个元素，例如 div 或 span，它会将模型的数据放置在该元素的开始和结束标记之间（例如 <span name="firstName">[数据在此处] <span></span></span>)。

Backbone.ModelBinder 背后的功能比我在这里演示的要强大得多，因此请务必阅读 GitHub 存储库上的文档以了解所有相关信息。

---

结论

事情就这样结束了。我只介绍了少数扩展和插件，但这些是我认为最有用的。

Backbone 格局在不断变化。如果您想查看各种可用 Backbone 扩展的完整列表，请访问此 wiki 页面，Backbone 团队会定期更新该页面。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!