Backbone.js 视图是一个简单的选择列表

Question

我构建了一个 Backbone 支持的库，允许用户添加/删除项目，就像 Todos 示例一样。

每次添加或删除项目 - 或刷新整个集合 - 我需要页面其他区域上的另外两个选择元素来重新填充最新项目作为选项。这是如何实现的，我是否只需在保存对集合的引用的视图的渲染函数中重新填充选择元素？

我很想仅为选择选项创建一个视图，但这似乎有点过分了，特别是考虑到视图不需要对任何事件做出反应时。其他视图使用选择选项来填充表单数据。

Answer 1

您是对的：为每个选择选项创建一个独特的视图。这一点也不过分；这就是视图的用途。他们监听来自模型的事件，在本例中是项目列表，并在收到事件后重新绘制自己。它们具有容器名称，因此一旦您在 View 子类的参数中建立了这些名称，您就再也不需要考虑它们了。您可以独立设计它们。

这就是视图的全部要点。

更重要的是，您还可以抽象出“事物列表的视图”，然后每个特定视图都可以从该视图继承，并添加两个功能：过滤器（“最新”）和渲染器。无论如何你都必须编写渲染器；您也可以利用一些语法糖来明确您在何处渲染什么。这比写评论更好。

Answer 2

不是为了分散人们对 Elf Sternberg 已经很好的答案的注意力，而是添加一些背景信息：

不要循环模板中的集合

如果你想这样做，你不妨只使用 HTML 部分和
阿贾克斯。相反，使用呈现其自己的视图（
粒度是最大限度地减少服务器同步和页面刷新的因素）。这
是递归的，你可以重复这个模式，直到不再有
要循环的关联数据。

— Jonathan Otto，普通人对 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 源
• 评论板源