Вложенные Backbone представления в WordPress

Backbone — это JavaScript библиотека, которая используется в административной панели WordPress для работы с медиа, ревизиями и т.д. WordPress дополняет эту библиотеку вложенными представлениями (Subviews). Рассмотрим, как их можно использовать. Предположим, у нас есть продукты, имеющие свойства. При щелчке на названии продукта мы добавляем новое свойство в коллекцию свойств продукта.
Необходимо подключить: jquery.js, underscore.min.js, backbone.min.js, wp-util.js, wp-backbone.js

<div id="container"></div> <!-- шаблон для продукта --> <script id="tmpl-product" type="text/html"> <p style="cursor: pointer">{{data.name}}</p> <ul class="properties"></ul> </script> <!-- шаблон для свойства продукта --> <script id="tmpl-property" type="text/html">{{{data.name}}}</script> <script> // создаем главное представление var main_view = wp.Backbone.View.extend({ prepare: function() { return this.model.toJSON(); } }); // модель для свойства продукта var property_model = Backbone.Model.extend({}); // коллекция моделей свойств продукта var property_collection = Backbone.Collection.extend({ model: property_model }); // представление для свойства продукта var property_view = main_view.extend({ tagName: 'li', template: wp.template( 'property' ), }); // модель для продукта var product_model = Backbone.Model.extend({ // коллекция свойств продукта properties: {}, initialize: function() { this.properties = new property_collection(); }, }); // представление для продукта var product_view = main_view.extend({ className: "product", template: wp.template( 'product' ), events: { // добавляем новое свойство в коллекцию свойств продукта 'click p': 'add_property' }, initialize: function() { // при добавлении нового свойства к продукту, добавляем вложенное представление this.listenTo( this.model.properties, 'add', function( property ) { this.views.add( '.properties', new property_view({ model: property }) ); } ); // рендер this.render(); jQuery( '#container' ).html( this.el ); this.views.ready(); }, add_property: function() { this.model.properties.add( {name: 'property ' + Math.random() } ); }, }); // создаем представление и передаем ему модель одиного продукта без свойств new product_view( { model: new product_model( { 'name': 'product 1', } ) } ); </script>