В этом примере реализован простой BackboneJS роутер.
Запись опубликована 18.09.2013 автором admin4p в рубрике Backbone JS, JavaScript, Без рубрики с метками Backbone, JavaScript, router.
В этом видео подробно рассмотрена реализация коллекции и представлений (view), событий и моделей в один функциональный jQuery виджет.
Запись опубликована 18.09.2013 автором admin4p в рубрике Backbone JS, JavaScript с метками Backbone, collection, JavaScript, mvc, view.
В этом видео описан самый простой вариант работы коллекции. Взаимодействие коллекции с другими видами и моделям смотрите в следующем видео.
http://www.it4p.ru
Запись опубликована 14.09.2013 автором admin4p в рубрике Backbone JS, JavaScript, Без рубрики с метками Backbone, JavaScript.
В этом видео кратко описан механизм работы View и его взаимодействие с шаблоном и моделью.
Запись опубликована 13.09.2013 автором admin4p в рубрике Backbone JS, JavaScript с метками Backbone, JavaScript, view.
JavaScript Undersocre Templater, простое решение для любого приложения позволяющее легко организовать шаблонизацию.
Запись опубликована 12.09.2013 автором admin4p в рубрике Backbone JS, JavaScript, Underscore с метками Backbone, JavaScript, Underscore.
В этом небольшом уроке вы познакомитесь с основными принципами работы JS фреймворка Backbone, а именно научитесь использовать события (events) и модели (models)
Для начала создадим в нашем файле кнопку, делающую что-либо с нашим объектом:
1 2
<h2>Object example</h2> <button id="myButton" class="btn btn-success">simple button</button>
Теперь создадим прототип нашей модели (объекта), а затем и его создадим:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
<script> // создаем объект var app = app || {}; $(function () { //создаем прототип нашего объекта или модели app.MyObject = Backbone.Model.extend({ //атрибуты по умолчанию defaults: { name: "name", description: "-", size: 100 }, //инициализируем объект после создания initialize: function() { console.log('obj created'); //слушаем изминения объекта this.on('change',function(){ console.log('obj changed'); //получаем только измененную часть объекта var json = this.changedAttributes(); console.log(json); }); }, //валидатор validate: function(attrs) { if (attrs.size>1000) { console.log('Incorrect size'); return 'Incorrect size'; } //если ошибок нет, то ничего не возвращаем }, //добавляем функцию, увеличивающую size increaseSize: function() { this.set({ size: this.get('size')+100 },{ validate:true //проверяем на валидность }); } }); //создаем объект app.myObject = new app.MyObject({ name: "rocket", description: "super" }); //записываем новые атрибуты app.myObject.set({ size: 250, type: 'active' }); //увеличиваем size объекта по нажатию на кнопку $('#myButton').live('click',function(){ app.myObject.increaseSize(); }); }); </script>
Запись опубликована 19.04.2013 автором admin4p в рубрике Backbone JS, JavaScript, Underscore.