There are 2 input[type=range] (there are 4 of them in general, but this is not so important). It is necessary that changing one slider changes another. Already 2 sit and no way. The model is responsible for everything, is it possible to somehow transfer the state permanently between 2 elements? All written on backbone
|
2 answers
Here is an example sketched: https://codepen.io/anon/pen/vyoJZY
// создаём общий класс модели var RangeControlModel = Backbone.Model.extend({ defaults : { value : 15 } }); // создаём экземпляр класса модели с данными: var rangeControlModel = new RangeControlModel(); var RangeControl = Backbone.View.extend({ events : { // 'change' или 'input': 'change' : 'update' }, initialize : function () { // связываем представления с созданной моделью данных, где у нас хранится общее значение для range input'а this.model = rangeControlModel; // слушаем изменения модели и вызываем рендер, если они произошли this.listenTo(this.model, 'change:value', this.render); this.render(); }, update : function (evnt) { this.model.set('value', this.el.value); }, render : function () { // ... this.$el.val(this.model.get('value')); } }); var range1 = new RangeControl({ el : '.range1' }); var range2 = new RangeControl({ el : '.range2' }); |
els = $('#ranges input[type="range"]'); els.bind('change', function(){ els.val(this.value); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ranges"> <input type="range"> <input type="range"> <input type="range"> <input type="range"> </div> - This is some kind of anti-Soviet. The correct concept is in the question - the author wants to create backbone views that are data-dependent, not jquery code - Arkadiy Afonin
|