Представление Backbone.js, представляющее собой простой список выбора

Question

Я создал библиотеку на базе Backbone, которая позволяет пользователю добавлять / удалять элементы, как в примере с Todos.

Каждый раз, когда элемент добавляется или удаляется - или обновляется вся коллекция -Мне нужно два других выбранных элемента, которые находятся в других областях страницы, чтобы заново заполнить последние элементы в качестве параметров.Как бы это реализовать, можно ли просто повторно заполнить элемент select в функции рендеринга представления, которое содержит ссылку на коллекцию?

Я испытываю желание создать представление только для параметров выбора, ноэто кажется излишним, особенно если учесть, что представление не должно реагировать ни на какие события.Опции выбора используются другими представлениями для заполнения данных формы.

Answer 1

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

Это целая точка Видов, являющихся такими, какие они есть.

Что еще более важно, вы также можете абстрагироваться от «представления списка вещей», и тогда каждое из ваших конкретных представлений может наследовать от этого представления и добавить две функции: фильтр («последний») ирендерВ любом случае вы должны написать средство визуализации;Вы можете также использовать немного синтетического сахара, чтобы прояснить, что вы делаете, где.Это лучше, чем писать комментарии.

Answer 2

Не отвлекать от уже превосходного ответа эльфа Штернберга, а добавить немного контекста:

Не перебирайте коллекции в ваших шаблонах

Если вы хотите сделать это, вы можете просто использовать HTML-партиалы и AJAX. Вместо этого используйте Backbone View, который отображает свои собственные представления ( гранулярность - это то, что минимизирует синхронизацию сервера и обновления страницы). это является рекурсивным, вы можете повторить этот шаблон, пока нет больше связанные данные для зацикливания.

- Джонатан Отто в Концептуальное понимание Backbone.js для каждого человека

Конечно, есть несколько ошибок , когда вы хотите визуализировать подпредставления.

Я выполнил поиск кода , чтобы попытаться найти примеры того, как это сделать. Оказывается, пример TodoMVC - хорошая модель для этого. Из источника Strider-CD (лицензия MIT):

var UserView = Backbone.View.extend({

    //... is a class. not sure how to put that here
    tagName: "option",

    // Cache the template function for a single item.
    template: _.template($('#user-item-template').html()),

    // The DOM events specific to an item.
    // maybe could put links here? but then user couldn't see on mouse-over

    // The UserView listens for changes to its model, re-rendering. Since there's
    // a one-to-one correspondence between a **User** and a **UserView** in this
    // app, we set a direct reference on the model for convenience.
    initialize: function() {
      _.bindAll(this, 'render');
      this.model.bind('change', this.render);
      this.model.bind('destroy', this.remove);
    },

    // Re-render the contents of the User item.
    render: function() {
      $(this.el).html(this.template(this.model.toJSON()));
      return this;
    },

    // Remove the item, destroy the model.
    clear: function() {
      this.model.clear();
    }

  });

  // The Application
  // ---------------

  // Our overall **AppView** is the top-level piece of UI.
  var UsersView = Backbone.View.extend({
    // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el: $("#user-form"),

    // no events here either at this time

    // At initialization we kick things off by
    // loading list of Users from the db
    initialize: function() {
      _.bindAll(this, 'addAll', 'addOne','render');

      Users.bind('add', this.addOne);
      Users.bind('reset', this.addAll);
      Users.bind('all', this.render);

      console.log("fetching Users");
      Users.fetch();
    },

    // Re-rendering the App just means refreshing the statistics -- the rest
    // of the app doesn't change.
    render: function() {
      console.log("rendering User AppView");
      // might want to put some total stats for the Users somewhere on the page

    },

    // Add a single todo item to the list by creating a view for it, and
    // appending its element to the `<ul>`.
    addOne: function(User) {
      console.log("adding one User: " + User.get("id") + "/" + User.get("email"));
      var view = new UserView({model: User});
      this.$("#user-list").append(view.render().el);
    },

    // Add all items in the **Users** collection at once.
    addAll: function() {
      console.log("adding all Users");
      console.log(Users.length + " Users");
      Users.each(this.addOne);
    }


  });
  // Finally, we kick things off by creating the **App**.
  console.log("starting userapp now");
  var UsersApp = new UsersView();

});

---

Дополнительные примеры представления списка со списком параметров можно найти в:

• Источник Zipkin
• источник обзора