Как модель и вид связаны в backbone.js

Question

Я новичок в Backbone.js и до сих пор не понимаю, как связаны модель и представление.

Я играл с Angular, где все довольно ясно, как модель, вид и контроллер связаны между собой.

Я знаю, что Angular и Backbone разные, а последний - MV*.

В Backbone я могу понять, как модель и представление создаются и работают, но как они связаны? Мне кажется, они отделены.

Пожалуйста, найдите минутку, чтобы объяснить или указать мне учебник.

заранее спасибо

РЕДАКТИРОВАТЬ

ОК, вот пример. Бывает, что я читаю книгу, которую предлагает тролль. Это код из книги GitHub

Я начинаю читать. Я понимаю Todo модель. Я понимаю TodoList коллекция. Тогда я доберусь до TodoView

• создает новый li
• использует шаблон Underscore для компиляции HTML
• определяет некоторые функции, которые реализуются позже в том же виде
• определяет функцию инициализации

внутри этой функции

что это? this.model.bind('change', this.render, this);как он может волшебным образом связать действие change к модели? Как код знает о модели? Когда он определил модель и как? Просто потому, что есть, код знает, что model знак равно Todo модель?

Как он это связывает? Чего мне не хватает Это меня смущает, так что чтение AppView вид мне не сильно помогает

еще раз спасибо

Answer 1

В backbone.js представления используются для отображения моделей в браузере. Например, у вас может быть объект модели, чье JSON-представление напоминает следующее: {'firstName': 'foo', 'lastName': 'bar' }И вы используете объект просмотра, чтобы сопоставить эту модель с DOM браузера. Как правило, вы используете вид объекта вместе с определенным механизмом шаблонов. Шаблоны позволяют создавать фрагменты HTML, заполненные данными модели. Если вы используете функцию шаблона подчеркивания, ваш шаблон может выглядеть примерно так:

<div>
    <div>First Name: <%= firstName %></div>
    <div>Last Name: <%= lastName%></div>
</div>

После объединения шаблона с данными модели это будет:

<div>
   <div>First Name: foo</div>
   <div>Last Name: bar</div>
</div>

Вы можете повторно использовать этот объект вида и его шаблон для отображения другого объекта модели, например {'firstName':'another foo', 'lastName':'another bar'}, так что результат html будет:

<div>
   <div>First Name: another foo</div>
   <div>Last Name: another bar</div>
</div>

Это одна вещь о связи между моделью и представлением. Также объект просмотра может прослушивать изменения в вашем объекте модели для немедленного отображения последних обновлений. Например (внутренний вид объекта): initialize: function() {this.listenTo(this.model, 'change', this.render);}

Answer 2

Вкратце, представления - это логика представления данных модели пользователю. Таким образом, в простейшей форме вы связываете модель с представлением через события изменения моделей, поэтому вы можете мгновенно обновлять презентацию при изменении ваших данных. Таким образом, простое представление будет принимать модель, создавать элементы HTML на основе данных этой модели, вставлять этот HTML в DOM и обновлять этот HTML при каждом изменении данных.

Вы можете найти большую книгу с полезными примерами здесь (бесплатно): http://addyosmani.github.io/backbone-fundamentals/

РЕДАКТИРОВАТЬ:

Что касается вашего обновленного вопроса о том, как представление знает о модели, this.model является ссылкой на фактический объект модели. Вы можете установить ссылку на модель при создании вида. То есть, когда вы вызываете конструктор представления для создания экземпляра представления, вы можете передать модель. Вам нужно пройти весь путь до объекта AppView в примере кода, чтобы увидеть, где это происходит, в методе addOne:

addOne: function(todo) {
  var view = new TodoView({model: todo});
  this.$("#todo-list").append(view.render().el);
}

Функция получает модель в качестве параметра, и когда создается представление, на эту модель ссылаются. Итак, теперь у вас есть вид, который знает о модели, и когда view.render вызывается метод, представление может отображать свой шаблон с данными модели. Когда вы изменяете данные в модели, например, с помощью метода set, myModel.set({title: "March 20", content: "In his eyes she eclipses..."});вызываешь change событие для этой модели. Вы можете увидеть все встроенные события для магистрали здесь: http://backbonejs.org/. Представление прослушивает это событие так же, как оно может прослушивать событие щелчка или любое другое событие. В коде в вашем примере представление прослушивает событие изменения из модели. Если он слышит это, он знает, что объект позади this.model изменился, и он может обновить DOM с новыми данными или сделать что-то еще. В случае примера это вызывает this.render, который обновляет DOM с новыми данными модели.

Answer 3

Я думаю, что вы хотите знать о Backbone.Events ( http://backbonejs.org/), и модели, и представления используют этот модуль, и именно так представление узнает об изменениях в модели, если вы хотите узнать, как это реализовано, вы всегда можете прочитать аннотированный источник ( http://backbonejs.org/docs/backbone.html), но более важно, я думаю, вы хотите узнать о шаблоне наблюдателя: http://addyosmani.com/resources/essentialjsdesignpatterns/book/.