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

Posted 2023-05-07

【中文标题】如何在 BackboneForms 架构中初始化 rails-select2 的选择？

【英文标题】：How to initialize the selection for rails-select2 in BackboneForms schema?

【发布时间】：2013-07-12 03:19:30

【问题描述】：

该项目使用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 的产品均未显示为选择项。

【参考方案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]);

【参考方案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

【讨论】：

感谢文档提示。我知道我必须将选择设置为options: value: [3, 5] 。我应该在哪里提供initSelection？我需要扩展editor for backbone-forms 吗？请添加一些代码sn-ps。

我可以看到您如何从schema 中的gist:5161061 加载config。但是你能指定你如何定义options.value resp。 config.value 和 initSelection 如果需要？请添加一些代码。

我猜initSelection 属于文档所述的选项：“请注意，要使用此方法，您必须在选项中定义 initSelection 函数...”

嗨！我认为你不需要initSelection，直到你开始使用一些远程功能，例如。 ajax 加载。您只需要在 config 对象中提供选项，就像 html 页面一样。 "nodeType": "title": "Node type", "type": "Select2", "config": "tags": ["tag 1","tag 2","tag 3","tag 4","tag 5","tag 6","tag 7"], "width": "300" 或 state: title: 'State', type: 'Select2', config: width: '300', data: [id:'1',text:'State 1',id:'2',text:'State 2'] 是的：使用 gist.github.com/powmedia/5161061 直到你需要类似对象的东西。

但是我要显示的数据是一个 "Product" 类型的对象，我需要将其 name 显示为当前选择。请参阅我在您的答案中提供的代码 sn-p。否则很难匹配。