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

Question

该项目使用提线木偶导轨、导轨上的主干、select2导轨和此到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

您可以使用value函数(http://ivaynberg.github.io/select2/#documentation)在CCD_ 9中。我个人建议您使用这个backknme表单插件：https://gist.github.com/powmedia/5161061有一条关于自定义编辑器的线索：https://github.com/powmedia/backbone-forms/issues/144