Угловой/магистральный бок о бок

Скрипты

Угловой

<script src= “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>

Магистраль

<script src=  “https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js”></script>

API

Угловой

Создание нового углового приложения

var app = angular.module( ‘appName’ , [])

Создание контроллеров

app.controller( 'controllerName' , function ( $scope ) {
});

Создание моделей

<p ng-model='modelName'>{{ modelName }}</p>

Отношения модель/контроллер

<div ng-controller='controllerName'>
 <p ng-model='modelName'>{{ modelName }}</p>
</div>

Магистраль

Представления поставляются с функциями инициализации и рендеринга. Модели поставляются с функцией инициализации.

Создание моделей

var AppModel = Backbone.Model.extend({
 
 initialize: function () {
 
 }
});

Создание представлений

var AppView = Backbone.View.extend({
 initialize: function () {
  this.render();
 },
 render: function () {
 }
});

Связь модель/представление

var appView = new AppView({ model: new AppModel() });

Создание приложения

Угловой

index.html

<body ng-app=‘appName’>

app.js

var app = angular.module( ‘appName’ );

Магистраль

index.html

<body>
 <script>
  $(function () {
    
    var app = new AppModel();
    var appView = new AppView({ model: app });
    $(‘body’).append(appView.render());
  });
 <script>
</body>

Визуализация представлений

Угловой

Использует контроллеры для обновления данных в html. Любые изменения немедленно отображаются из-за двусторонней привязки данных Angular.

Каждый контроллер связан с partial html, в котором установлены модели. К каждому контроллеру также прикреплен уникальный объект $scope, который позволяет ему манипулировать моделями, установленными в партиале,с которым он связан.

В приведенном ниже примере файла index.html контроллер firstController связан со всем html в содержащем его div — этот блок html является частичным, связанным с этим контроллером. $scope firstController дает ему доступ к модели textToRender для манипулирования/обновления.

Контроллер secondController связан со всем html во втором div, и поэтому его $scope позволяет ему получить доступ к модели moreTextToRender. В коде нашего secondController мы не сможем ссылаться на модель textToRender, так как эта модель находится в $scope firstController.

index.html

<div ng-controller="firstController">
 <p ng-model=“textToRender”>{{ textToRender }}</p>
</div>
<div ng-controller="secondController">
 <p ng-model="moreTextToRender">{{ moreTextToRender }}</p>
</div>

controller.js

app.controller(‘firstController’, function ( $scope ) {
 $scope.textToRender = "Hello World";
});
app.controller('secondController', function ( $scope ) {
 $scope.moreTextToRender = "Goodbye World";
});

Отрисовано index.html

<div ng-controller=”firstController”>
 <p ng-model="textToRender">Hello World</p>
</div>
<div ng-controller="secondController">
 <p ng-model="moreTextToRender">Goodbye World</p>
</div>

Магистраль

Использует базовый объект View для визуализации базового объекта Model на основе свойств или изменений, заданных в связанной модели. Поскольку Backbone не использует двустороннюю привязку данных, каждое связанное представление необходимо визуализировать и повторно визуализировать связанные с ним изменения модели*.

Точно так же каждое представление в Backbone имеет доступ только к элементам в связанной с ним области. Хотя Backbone не предоставляет пользовательскую переменную $scope, представление backbone не может изменять html-элементы, с которыми оно не связано. Кроме того, он может изменять и обнаруживать изменения только в одной модели, которая была передана в качестве параметра (на который ссылается this.model для доступа к атрибутам и функциям этой модели).

AppModel.js

var AppModel = Backbone.Model.extend({
 initialize: function () {
  this.set('textToRender', 'Hello World');
 }
});

AppView.js

var AppView = Backbone.View.extend({
 
 tagName: 'div',
 initialize: function () {
  this.render();
 },
 
 render: function () {
  return this.$el.html([
   this.model.get('textToRender')
  ]);
 }
});

* Представление и модель становятся связанными, когда в них передается конкретный экземпляр модели.

<body>
 <script>
  $(function () {
   var firstApp = new AppModel();
   var secondApp = new AppModel();
   var firstAppView = new AppView({ model: firstApp });
   var secondAppView = new AppView({ model: secondApp });
  });
 </script>
</body>

Угловой/магистральный бок о бок

Вопросы по теме