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