Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: What is mean by backbone.js?

I know about AngularJs and Node.Js. But what about Backbone.Js and Ember.Js? Have you any idea of these?
Ответ: You play with fire
Вопрос: Создание модели Backbone в реальном примере TodoMVC

привет.
читаю учебник по backbone. пытаюсь разобрать пример приложения по созданию задач TodoMVC


в учебнике предлагается такой способ создания модели:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// js/models/todo.js
 
var app = app || {};
 
// Модель задачи:
// -----------
// Модель задачи имеет атрибуты 'title', и 'completed':
 
app.Todo = Backbone.Model.extend({
    // Атрибуты по умолчанию определяют, что у каждой созданной задачи будут ключи
    // 'title' и 'completed':
    defaults: {
        title: '',
        completed: false
    },
 
    // переключение состояния задачи 'completed':
    toggle: function() {
        this.save({
            completed: !this.get('completed')
        });
    }
});
я тут не могу понять что написано с строчке 3
Javascript
1
var app = app || {};
и строчку 9
Javascript
1
app.Todo = Backbone.Model.extend({
я думал модели в Backbone создаются так:
Javascript
1
2
3
var TodoModel = Backbone.Model.extend({
    // код
});
а потом экземпляр:
Javascript
1
var todo1 = new TodoModel; // создали объект класса
Тут в самом первом листинге какой то новый способ что ли реализован? Можете объяснить?))
Ответ:
Сообщение от j2FunOnly
alex_7, вы как книгу-то читаете? 100% там про это написано.
привет
я читаю книжку "эдди османи разработка backbone приложений" - ее можно бесплатно скачать в интернете.
там как раз когда разбирали модели, представления и прочее, то создавали всё одним способом. А когда начали реальную прогу писать, то стали использовать другой способ без объяснения причин(
Вопрос: Как быстро выучить JS (Angular, Backbone)

Добрый день.
Нашел вакансию JavaScript разработчик с хорошей оплатой. Сам я не зарабатывал на написании сайтов, но для себя пишу постоянно. Использую JQuery (Он и так в Bootstrap идет).
Но чувствую если заявлюсь со знаниями JQuery, то меня пошлют подальше. По этому я и пришел сюда за помощью.
1) Дорогие форумчане, подскажите, как в краткие сроки выучить JS + скажем Angular?
Я конечно могу в интернете поискать уроки, но мне нужен самый сок.
2) Спрашиваю у вас как у профессионалов своего дела, какая база должна быть для трудоустройства на должность JS разработчик, в скобках Angular, Backbone?
Любая информация будет полезна, от ресурса с уроками или списка того, что надо освоить, до личного мнения и опыта.
Спасибо за помощь!
Ответ: Костяныч, вкратце никак, за пару дней фреймворк не выучить.
0). js-фреймворки разнообразны и в моде недолго, толковых людей на рынке не так много. Очень часто работодатели готовы взять человека с хорошим чистым js в надежде что он разберется с фреймворком по ходу

1). На бою, чотам =D. Говорю, не надо обязательно выучить фреймворк к собеседованию, главное на собеседовании не врать что знаешь.
У Angular хороший официальный туториал.
Для backbone никаких обучалок не надо, это скорее каркас для написания собственного фреймворка чем полноценный фреймворк. Официальных доков и пару дней поиграться - хватит чтобы что-то представлять.

2). Да вот черт знает, серьезно. Нужно желание писать код и какой-то опыт этого. То, что спрашивают в собеседованях на jsника может пригодится, а может не пригодиться вообще. Сейчас самые популярные темы для именно js-программиста примерно такие, в порядке убывания частоты
А). Древняя как мир задачка про setTimeout в цикле, проверяет базовое понимание замыканий
B). Расскажи про ООП в javascript, несколько подробных вопросов на понимание
C). Какая-нибудь fizzbuzz задачка на листочке
D). Какая-нибудь задачка на hoisting
E). Какая-нибудь задачка на хорошее понимание контекста. Если заедешь на strict режим, про него спросят тоже.
F). Расскажи про способы кросдоменного взаимодействия. Вопрос не самый популярный в среднем по больнице, но очень популярный в крутых конторах. Планируется что ты подробно расскажешь про вебсокеты и cors (тут заодно слегка спросят про http вообще), упомянешь jsonp.

Еще два вопроса, не очень частых но регулярно встречающихся
G). Что знаешь про es6?
H). Расскажи про известные тебе особенности разных браузеров. Не только про IE =)

Добавлено через 22 минуты
Ах да, совсем забыл, про MV* тоже очень любят спрашивать

Добавлено через 2 минуты
То есть если ты хочешь спокойно проходить собеседованя на junior/middle js тебе нужно уметь уверенно болтать по каждому из этих пунктов. Относится к вакансиям именно на javascript-программиста а не "веб-на-все-руки"
Вопрос: крякозябины. js, backbone

работаю с backbone
но причина наверное не в нем.

index.html и main.js сохранены в utf-8
в index.html прописано:
<meta charset="utf-8">

var peopleCollection = new PeopleCollection([
	{
		name: 'Петр',
		age: 20,
		job: 'Таксист'
	},
	{
		name: 'Олег',
		age: 24,
		job: 'Менеджер'
	},
	{
		name: 'Анна',
		age: 18,
		job: 'Студентка'
	}
]);


$('body').append(peopleView.el);

Рендериться с помощью шаблонизатора underscore.
При выводе вида коллекции, вместо русских букаф
ромбики с вопросиками.
Как решить проблему?
Ответ: torsar, весь шаблон в js объявлен или есть какой-то еще файлик с шаблоном? Если есть, то в нем тоже надо кодировку выставить. И в файлике со вьюхой заодно)

Можно еще убедиться что верная кодировка выставлена в серверном заголовке, но не думаю, что это влияет.

Во всех браузерах такое? Может быть в каком-то конкретном браузере стоят принудительные настройки на кодировку например.

Ну то есть надо взять прям, пройтись и выяснить: верная ли кодировка там где объявляются данные, в шаблоне, в скомпилированном шаблоне, в конечной странице к которой мы зааппендили скомпилированный шаблон. На одном из этих участков и пропадает.
Вопрос: Пример сложного приложения на Backbone

Посоветуйте какой-нибудь ресурс или скринкаст с примером кода сложного приложения на Backbone. А то везде одни типовые менеджеры контактов или списки книг
Ответ: Ku2min, Придумай структурированное приложение(или поручись сделать) и начни его реализовывать на backbone А простые примеры нужны для того, чтобы дать представление о фреймворке не усложняя при этом жизнь.
Вопрос: Как правильно скачать backbone.localStorage.js с гитХаба?

Привет. Вот тут на гитХабе это всё лежит:


Там здоровый список файлов. Я так понимаю, мне нужен файл backbone.localStorage.js , на него можно перейти и посмотреть:


Я ведь могу скачать его? Положить себе на компе в нужную папку и подключить в файле index.html:
HTML5
1
<script src="js/lib/backbone.localStorage.js"></script>
Но я не могу понять: а что там за куча дополнительных файлов на гитХабе рядом с ним валяются? Зачем они нужны?
Задаю вопрос, потому что уже не первый раз перехожу на гитхаб с целью скачать какую-то библиотеку, а там вместе с ней целая телега непонятных файлов.
Ответ: alex_7, установи и потом выполни в консоли git clone https://github.com/jeromegn/Backbone.localStorage.git
Вопрос: Основы backbone.js

Доброго времени суток. Пытаюсь разобраться с backbone.js, я новичок и в backbone да и вобще в js
Есть вот такой код

CODE (javascript):

  1. var TodoItemView = Backbone.View.extend({
  2.         tagName: 'li',
  3.         events: {
  4.                 "click #delete" : "deleteTodo",
  5.                 "click #check" : "toggle",
  6.                 "dblclick #todo-text" : "edit",
  7.                 "blur .edit" : "close",
  8.                 "keypress .edit" : "updateOnEnter"
  9.  
  10.         },
  11.         initialize: function() {
  12.                 this.template = _.template($("#tmpl-each-item").html());
  13.                 //this.listenTo(this.model, 'destroy', );
  14.         },
  15.         render: function() {
  16.                 $(this.el).html(this.template(this.model.toJSON()));
  17.                 this.$el.toggleClass('done', this.model.get('done'));
  18.                 this.$('input').prop('checked', this.model.get('done'));
  19.                 this.input = this.$('.edit');
  20.                 return this;
  21.         },
  22.         deleteTodo: function(){
  23.                 this.model.destroy({
  24.                         success: function(){
  25.                                 app.todoList.trigger('change');
  26.                         }
  27.                 })
  28.         },
  29.         edit: function(){
  30.                 // since we didn`t specify el, it is by default our tagName (<li>)
  31.                 this.$el.addClass("editing");
  32.                 this.input.focus();
  33.         },
  34.         updateOnEnter: function(e){
  35.                 if (e.keyCode == 13) this.close();
  36.         },
  37.         close: function(todo) {
  38.                 value = this.input.val();
  39.                 console.log(this.model);
  40.                 this.model.save({"text": value});
  41.                 this.$el.removeClass("editing");
  42.         },
  43.         toggle: function(){
  44.                 this.model.toggle();
  45.         }
  46.  
  47. });


Стянул его с какого то манулала на хабре, пытаюсь разобраться. Но есть некоторые моменты непонятные мне
Я не могу понять откуда беруться значения todoList, в 28 строке? Не понимаю что делает в целом app.todoList.trigger('change');
И когда я делаю свой аналог, с другими переменными у меня почему то тудушка удаляется но страница не обновляется, т.е. нажал кнопку удалить, из бд удалилать, а на экране исчезает только после обновления страницы. я понимаю что нужно что то сделать в callback. Обьясните пожалуйста в чем причина? Свой код прилагаю.

CODE (javascript):

  1. 'use strict';
  2.  
  3. define(
  4.         [
  5.         'jquery',
  6.         'bootstrap',
  7.         'underscore',
  8.         'backbone'
  9.         ],
  10.         function ($, bootstrap, _, Backbone){
  11.                 var userView = Backbone.View.extend({
  12.                         tagName: 'li',
  13.                         events: {
  14.                                 'click #del': 'delete'
  15.                         },
  16.                         initialize: function() {
  17.                                 this.template = _.template($('#tmpl-each-item').html());
  18.                         },
  19.                         render: function() {
  20.                                 $(this.el).html(this.template(this.model.toJSON()));
  21.                                 return this;
  22.                         },
  23.                         delete: function() {
  24.                                 this.model.destroy({
  25.                                         success: function(){
  26.                                                 console.log('deleted');
  27.                                         }
  28.                                 })
  29.                         }
  30.                 });
  31.                
  32.                 return userView;
  33.         });



P.S. консоль отображает deleted, как положено может надо в succsess нужно еще раз рендерить, или я вобще не понимаю, запутался в общем.

P.P.S Пробовал по аналогии добавить в

CODE (javascript):

  1. delete: function() {
  2.                                 this.model.destroy({
  3.                                         success: function(){
  4.                                                 app.userList.trigger('change');
  5.                                                 console.log('deleted');
  6.                                         }
  7.                                 })
  8.                         }



и все равно с экрана пропадает только после обновления страницы
Ответ:
DelphinPRO пишет:
delete - зарезервированное слово в js, я бы не стал его использовать для именования своих объектов.

app.todoList.trigger('change'); - вызывает (генерирует) событие 'change' на элементе todoList


Спасибо большое за ответ, разобрался уже, помогла такая конструкция -

CODE (javascript):

  1.  
  2. delete: function() {
  3.                                 var self = this;
  4.                                 this.model.destroy({
  5.                                         success: function(){
  6.                                                 self.$el.remove();
  7.                                                 console.log('deleted');
  8.                                         }
  9.                                 })
  10.                         }
  11.  


По поводу delete учту. Еще раз спасибо!
Вопрос: AngularJS, KnockoutJS, Backbone, ExtJS - это что-то вроде jQuery?

Знаю, что эти библиотеки облегчают создание интерфейса в соотв. с паттернами MVC, MVP, MVVM.
А что там еще есть?
Есть ли, например, удобные средства для AJAX и для DOM, как в jQuery?

Уже задавал этот вопрос в одной теме, но единственному ответчику я там чем-то рылом не вышел, сам не пойму чем. Решил создать отдельную тему.
Ответ: Все эти фреймворки созданы чтобы руками не работать с DOM. MVC, MVVM в них условный, так что это принято называть MVW(Model View Whatever) или MV*
Angular - есть всё необходимое плюс куча модулей отдельных, двухсторонний дата биндинг по умолчанию
KnockoutJS - не пользовался
Backbone - очень маленький фреймворк только для MVC, использовать только бекбон - значит писать всё на чистом JS, его плюс в том, что он довольно прост и позволяет удобно организовывать модели, для всего остального можно использовать другие библиотеки.
ExtJS - это монстрилла, я им особо не пользовался, но уверен что Ajax там есть встроенный, помимо этого он позволяет строить очень богатые интерфейсы с окнами, вкладками итд (вот пример )

PS: Есть в бекбоне и View, но мне не нравится его язык шаблонов
PS2: - вот тут на примере одного приложения можно посмотреть как и что можно сделать с фреймворком
Вопрос: Вопрос по backbone.js

Если здесь есть гуру в backbone (А я в этом не сомневаюсь) подскажите пожалуйста такой вопрос:
Есть такая функция,
CODE (javascript):

  1.  
  2. this.userList = new Users();
  3.         this.userList.fetch();
  4.         var events = _.filter(this.userList, function(login){
  5.                 return login == 'ddd';
  6.         });
  7.         console.log(this.userList);
  8.         console.log(this.userList.length);
  9.         console.log(events);
  10.  

по идее backbone должен подхватывать все методы underscore, но после выполнения этой функции в консоли я вижу (картинку прикрепил)

но после того как я получаю коллекцию this.userList делаю фетч у нее 6 моделей, но как только я применяю _.filter то моделей становиться 0, и еще что интересно, если я делаю console.log(this.userList.length); по идее должно выводить в консоли 6, но не тут то было выводит 0, даже если не использовать _.filter, не могу найти причину 2 день, прошу помощи
Прикреплено изображение (Нажмите для увеличения)

(Отредактировано автором: 19 Октября, 2015 - 16:45:40)

Ответ:
Спасибо вам огромное за помощь!! Да действительно использую findWhere.

P.S. Оба ваши решения с filter работают как положено.
Вопрос: Как правильно написать валидацию для модели в Backbone

Привет.
Я посмотрел вот этот коротенький . И сделал всё как там:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var Person = Backbone.Model.extend({
    // Наполним модель данными:
    defaults: {       // это данные по умолчанию
        name: 'Иван Петров',
        age: 40,
        job: 'слесарь'
    },
 
    validate: function(attrs) {
        console.log(attrs);
        if( attrs.age <= 0 ) {
            return "Возраст должен быть положительным числом!";
        }
    },
 
    work: function() {
        return this.get('name') + ' is working';
    }
})
Затем в браузере Хром ---> Дополнительные инструменты ----> Инструменты разработчика ---> и пишу в Console:
Javascript
1
2
3
4
5
6
7
8
9
10
11
var person = new Person( {name: 'Nikolay', job: 'web-developer' } );
// создал person 
 
person.set('age', 20);
// поменял возраст
 
person.on('error', function(model, error) { console.log(error) } );
// ставим событие на ошибку, чтоб вывел сообщение
 
person.set('age', -20);
// пробуем поставить неправильный возраст
И в итоге отрицательный возраст -20 установился. Но как я понял , должна была вылезти ошибка типа:
Object....
Возраст должен быть положительным!
false


Подскажите, почему у меня не получается :-(
Ответ: урок по старой версии бекбона.
Сейчас чтобы отработала валидация при сете - нужно добавлять {validate:true}

Javascript
1
person.set('age', -20, {validate:true});