如何在 BackboneForms 架构中初始化 rails-select2 的选择？

Question

该项目使用marionette-rails、backbone-on-rails、select2-rails 和此port to BackboneForms 来提供多选表单字段。选择选项可供用户使用。它们是从包含选项总列表的集合中检索的：

MyApp.module("Products", function(Products, App, Backbone, Marionette, $, _) {

  Products.CustomFormView = Products.CustomView.extend({

    initialize: function(options) {
      this.model.set("type", "Product");
      Products.EntryView.prototype.initialize.apply(this, arguments);
    },

    schemata: function() {
      var products = this.collection.byType("Product");
      var productTypes = products.map(function(product){
        return {
          val: product.id,
          label: product.get("name")
        };
      });

      return {
        productBasics: {
          name: {
            type: "Text",
            title: "Name",
            editorAttrs: {
              maxLength: 60,
            }
          },
          type: {
            type: 'Select2',
            title: "Product type",
            options: {
              values: productTypes,
              value: [3, 5],
              initSelection: function (element, callback) {
                var data = [];
                $(element.val().split(",")).each(function () {
                  data.push({id: this, text: this});
                });
                callback(data);
              }
            },
            editorAttrs: {
              'multiple': 'multiple'
            }
          }
        }
      };
    }

  });
});

我是否在options.value 中正确初始化value？为什么initSelection 永远不会被调用？我从文档中复制了该功能-对于我的情况可能不完整。 ID 为 3 和 5 的产品均未显示为选择项。

Answer 1

initSelection 仅在异步加载数据时使用。我的理解是，如果您使用数组作为 Select2 控件的数据源，则无法在初始化时指定选择。

初始化选择的最佳方式是在创建表单后使用setValue。这是基于您示例中的代码的简化示例。

var ProductForm = Backbone.Form.extend({
  schema: {
    type: {
      type: 'Select2',
      title: "Product type",
      options: {
        values: productTypes,
      },
      editorAttrs: {
        'multiple': 'multiple'
      }
    }
  });

var form = new ProductForm({
  model: new Product()
}).render();

form.setValue("type", [3, 5]);

Answer 2

您可以在setValue 中使用value 函数（http://ivaynberg.github.io/select2/#documentation）。我个人推荐你使用这个 backbonme-forms 插件：https://gist.github.com/powmedia/5161061 有一个关于自定义编辑器的帖子：https://github.com/powmedia/backbone-forms/issues/144