Tingkatkan trunk dengan sambungan untuk meningkatkan pengalaman

Backbone menjadi semakin popular sebagai rangka kerja pembangunan aplikasi web. Dengan populariti ini datang banyak sambungan dan pemalam untuk meningkatkan kefungsian rangka kerja dan mengisi lubang yang orang lain rasa perlu diisi. Mari kita lihat beberapa pilihan terbaik.

---

Tulang belakang.Boneka

Dibangunkan oleh Derick Bailey, sambungan ini agak besar dan merupakan kegemaran peribadi saya. Daripada menambah satu atau dua ciri pada Backbone, Derick memutuskan untuk mengisi semua lubang terbesar yang dia rasa wujud. Inilah yang dia katakan mengenainya dalam readme projek GitHub.

"Backbone.Marionette ialah perpustakaan aplikasi komposit untuk Backbone.js yang direka untuk memudahkan pembinaan aplikasi JavaScript yang besar. Ia ialah koleksi reka bentuk biasa dan corak pelaksanaan yang ditemui dalam aplikasi yang saya (Derick Bailey) telah bina menggunakan Backbone, dan termasuk Pelbagai bahagian yang diilhamkan oleh seni bina aplikasi komposit, seperti rangka kerja “Prism” Microsoft ”

.

Mari kita lihat dengan lebih dekat apa yang Marionette tawarkan kepada kita:

• Aplikasi: Ini ialah objek pusat yang melaluinya segala-galanya dalam aplikasi berkomunikasi. Ia menyediakan cara yang cepat dan mudah untuk menyediakan paparan utama aplikasi, hab acara pusat yang melaluinya setiap modul dalam aplikasi boleh berkomunikasi supaya mereka tidak bergantung antara satu sama lain, dan menyediakan Initializer untuk kawalan terperinci ke atas cara aplikasi anda bermula.
• Modul: Satu cara untuk merangkum kod modul dan menamakan modul ini pada objek aplikasi pusat.
• Paparan: Kelas paparan baharu untuk dilanjutkan menyediakan kaedah asli untuk pembersihan supaya anda tidak mengalami kebocoran memori. Ia juga mengandungi templat rendering untuk paparan ringkas, hanya tentukan templat dan model dan ia akan menguruskan yang lain.
• Koleksi/Paparan Komposit: Di sinilah Perpustakaan Apl Komposit memainkan peranan. Kedua-dua paparan ini membolehkan anda membuat paparan dengan mudah yang boleh mengendalikan proses memaparkan semua paparan dalam koleksi, malah hierarki koleksi dan model bersarang, dengan sedikit usaha.
• Wilayah dan Reka Letak: Rantau ialah objek yang mengendalikan semua kerja pemaparan, penyahpadanan dan penutupan paparan di lokasi tertentu dalam DOM. Reka letak hanyalah paparan biasa dengan kawasan terbina dalam untuk bekerja dengan subview.
• AppRouter: Satu jenis penghala baharu yang boleh menggunakan pengawal untuk mengendalikan beban kerja supaya penghala hanya mengandungi konfigurasi laluan.
• Acara: Marionette dilanjutkan daripada projek Wreqr untuk menjadikan acara Backbone lebih berkuasa untuk mencipta aplikasi berasaskan acara berskala besar.

Saya hanya menconteng apa yang boleh dilakukan oleh Marionette. Saya pasti mengesyorkan pergi ke GitHub dan membaca dokumentasi mereka di wiki.

Selain itu, Andrew Burgess merangkumi Marionette dalam kursus Tuts+ Premium Tulang Belakang Lanjutan Corak dan Tekniknya.

---

Pengesahan rangkaian tulang belakang

Backbone.Validation bertujuan untuk mengisi subset kecil masalah: iaitu pengesahan model. Backbone mempunyai berbilang sambungan pengesahan, tetapi yang ini nampaknya telah mendapat penghormatan paling tinggi daripada komuniti.

Anda sebenarnya tidak perlu menulis atribut validate 方法，而是可以为模型创建 validation untuk model anda, iaitu objek yang menyatakan setiap atribut yang ingin anda sahkan dan peraturan untuk mengesahkan setiap atribut senarai. Anda juga boleh menentukan mesej ralat untuk setiap sifat dan meneruskan fungsi tersuai untuk mengesahkan sifat individu. Anda boleh melihat contoh di bawah, diubah suai daripada salah satu contoh di tapak web mereka.

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

Terdapat banyak pengesah dan skema terbina dalam yang boleh anda semak, malah terdapat cara untuk melanjutkan senarai dengan pengesah global anda sendiri. Pemalam Backbone ini tidak menjadikan pengesahan menyeronokkan, tetapi ia mengalih keluar sebarang alasan untuk tidak menambah pengesahan. Sila lawati tapak web mereka untuk mendapatkan lebih banyak contoh dan arahan yang lebih mendalam tentang cara menggunakan alat hebat ini.

---

Backbone.LayoutManager

Backbone.LayoutManager adalah untuk menjadikan pandangan Backbone lebih baik. Seperti Backbone.Marionette, ia memperkenalkan kod pembersihan untuk mengelakkan kebocoran memori, mengendalikan semua boilerplate dan memberikan anda hanya konfigurasi dan kod khusus aplikasi. Tidak seperti Marionette, LayoutManager memfokuskan secara khusus pada paparan.

Oleh kerana LayoutManager hanya menumpukan pada paparan, ia boleh melakukan lebih banyak untuk paparan berbanding Marionette. Sebagai contoh, LayoutManager dapat melakukan pemaparan tak segerak apabila anda ingin memuatkan templat secara dinamik daripada fail luaran.

LayoutManager juga boleh mengendalikan subview, walaupun dengan cara yang sangat berbeza daripada Marionette. Walau bagaimanapun, ia kebanyakannya konfigurasi, yang menjadikan perkara sangat mudah dan menghapuskan 90% daripada kerja yang anda perlu lakukan jika anda cuba melaksanakan semuanya sendiri. Lihat di bawah contoh mudah untuk menambahkan tiga subview pada paparan:

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 团队会定期更新该页面。

Atas ialah kandungan terperinci Tingkatkan trunk dengan sambungan untuk meningkatkan pengalaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!