Question

我刚刚在backbone.js上启动了POC并面临一个基本问题。我正在使用集合填充下拉列表。但是dropdwon没有填充集合中定义的静态值。

你可以帮我解决这个问题。

      $(function () {
      var Country = Backbone.Model.extend();
      var Countries = Backbone.Collection.extend({
          model: Country

      });

      var CountryView = Backbone.View.extend({
          tagName: "option",

          initialize: function () {
              _.bindAll(this, 'render');
          },
          render: function () {
              $(this.el).attr('value',
    this.model.get('id')).html(this.model.get('name'));
              return this;
          }
      });

      var CountriesView = Backbone.View.extend({
          initialize: function () {
              _.bindAll(this, 'addOne', 'addAll');
              this.collection.bind('reset', this.addAll);
          },
          addOne: function (country) {
              $(this.el).append(
    new CountryView({ model: country }).render().el);
          },
          addAll: function () {
              this.collection.each(this.addOne);
          }
      });

      var countries = new Countries([{
          id: 'US',
          name: 'US'
      },
          {
              id: 'India',
              name: 'India'
          },
          {
              id: 'UK',
              name: 'UK'
          }]);
      var countriesview = new CountriesView({ el: $("#country"), collection: countries });
      //countries.fetch();
  });

Answer 1

看起来你的渲染方法永远不会被调用，因为集合的reset没有被触发。这是fiddle，其中我在创建collection.reset后使用您的模型数据调用countriesview。在渲染中有一个console.log语句，您应该看到它会触发。

  countriesview.collection.reset([{
      id: 'US',
      name: 'US'
  },
  {
      id: 'India',
      name: 'India'
  },
  {
      id: 'UK',
      name: 'UK'
  }]);

我认为首次创建视图时可能会触发一个事件，并且您需要渲染视图以响应该事件。

编辑：实际上，不，为什么会这样？ Backbone的观点就是：一个视图。它封装的唯一逻辑就是展示自己。它不知道它是一个集合视图，因此它不响应使用集合进行实例化。可能你想在构造函数中添加一些逻辑来启动集合视图（或者像我在这里所做的那样并调用reset来填充集合）。除了骨干网之外，我习惯使用Marionette。 Marionette为您提供了足够的专业化视图，您无需担心创建自定义主干视图以处理集合等。

使用Backbone.js绑定下拉列表

1 个答案: