Нужно сделать простой список? Попробуйте магистраль!

На прошлой неделе я говорил о разделении проблем и о том, почему это важно, когда вы начинаете строить приложения. Один из способов достижения этого – использовать рамки, такие как магистраль. Магистраль – это в основном легкая структура, которая позволяет структурировать код JavaScript в модельной моде, где:

• Модель – это объект, который представляет данные и связанные с ними методы.
• View отвечает за передачу данных пользователю и имеет обработку событий.

Чтобы начать, любой организованный кодер настроит свой основной файл с помощью данных, которые составляют список. Обычно я называю это приложение файла. Для этого примера мы собираемся составить список тортов!

//here is our cake data
var cakes = [
  {
    name: 'Strawberry Shortcake',
     /* some info here */
  },
  {
    name: 'Gentilly Cake',
     /* cake info here */
  },
  {
    name: 'Tiramisu',
     /* some more info here */
  },
];

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

// 1. instantiate collection based on the Cakes model
var myBakery = new Backbone.Collection(cakes, { model: Cakes });
// 2. instantiate the collection view based on the collection myBakery
var cakeView = new CakeView({ collection: myBakery });
// 3. append the bakeryView to the body of the HTML page you definitely made
$('body').append(cakeView.$el);

Вы заметите на шаге 1, я ссылаюсь на модель под названием Cakes, но мы еще не сделали этого! Это следующий шаг: настройте файл, который будет вашей моделью, которая в этом случае будет управлять данными для одного торта. Это будет выглядеть примерно так:

var Cake = Backbone.Model.extend({
// default cake info
  defaults: {
    name: 'Strawberry Shortcake',
    image: 'strawberry-shortcake-cake-thumb.jpg',
    Ingredients: `1 1/2 pounds strawberries, stemmed and quartered,
                  5 tablespoons sugar,
                  2 cups all-purpose flour,
                  2 teaspoons baking powder,
                  1/4 teaspoon baking soda,
                  2 tablespoons sugar,
                  3/4 teaspoon salt,
                  1 1/2 cups heavy cream,
                  Whipped Cream`,
  }, // hungry? i am...

});

Наконец, создайте файл представления (я позвонил в этот CakeView на шаге 2). Cakeview контролирует рендеринг всей коллекции пекарни. Таким образом, вы начинаете с создания свойства, которое будет обрабатывать рендеринг данных в DOM. Для каждого нового предмета создается новый отдельный Cakeview на основе Cakemodel. Затем вызовите функцию рендеринга, когда это инициализируется, чтобы представить ее на страницу.

var CakeView = Backbone.View.extend({
  tagName: 'table',

  //renders each cake in our bakery collection on the cakeView
  render: function() {
    this.$el.html('');
    //looping through the cake data
    this.collection.each(function(cakeModel) {
      /* for each piece of data, passing the model containing the current cake's data
      to the cake view and appending to the table */
      this.$el.append(new CakeView({model: cakeModel}).$el);
    }, this);

    return this;
  },
  // on initialize, the view will render
  initialize: function() {
    this.render();
  },
});

И это составляет список, показывающий несколько пирожных и как сделать их с помощью основы. Довольно просто. По сути, Backbone обеспечивает удобные варианты для лучшей структуры кода. Это просто об этом. (И есть отличные документы, не могу драться со мной там!)

Для тех, кто хочет сказать, что костяк совершенно не имеет значения Здесь это список сайтов, которые все еще используют его!

Оригинал: “https://dev.to/harleypadua/need-to-make-a-simple-list-try-backbone-7kk”