Select2 在淘汰赛中选择标签作为对象而不是“id”

Posted 2023-05-07

【中文标题】Select2 在淘汰赛中选择标签作为对象而不是“id”

【英文标题】：Select2 selected tag as object instead of 'id' in Knockout

【发布时间】：2015-02-14 05:01:31

【问题描述】：

所以我有一个 select2 标签输入工作正常，正确显示标签，并将选定的 id 存储到 selectedProducts observableArray 中。但是，我的 HTTPPost 需要一个对象数组，而不是整数数组。 我一直在寻找如何让 select2 保存为一个对象（即 id: 1, text: "abc"），而不仅仅是一个整数数组。

我的绑定如下：

<div class="col-sm-10">
    <input type="hidden" id="tags" class="select2 form-control" multiple="multiple" data-bind="value: selectedProducts, select2: tags: ko.toJS($parent.availableProducts), placeholder: 'select products'" />
    <pre data-bind="text: ko.toJSON(products, null, 2)"></pre>   
</div>           

var newItem = function (newitem) 
    var self = this;

    self.id = ko.observable();  
    self.selectedProducts = ko.observableArray();
    self.products = ko.computed(function () 
        return self.selectedProducts().split(',');
    , self);
       

var viewModel = function (data) 
    var self = this;
    self.newitem= ko.observable(new newItem());    
    self.availableProducts = ko.observableArray([]);      
    $.ajax(
        type: "GET",
        url: '/GetAllProducts',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        async: false,
        success: function (data) 
            ko.mapping.fromJS(data, , self.availableProducts);
        ,
        error: function (err) 
            alert(err.status + " : " + err.statusText);
        
    );       

ko.bindingHandlers.select2 = 
    init: function (element, valueAccessor, allBindingsAccessor) 
        var obj = valueAccessor(),
          allBindings = allBindingsAccessor(),
          lookupKey = allBindings.lookupKey;

        setTimeout(function () 
            $(element).select2(obj);
        , 0);

        if (lookupKey) 
            var value = ko.utils.unwrapObservable(allBindings.value);
            $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) 
                return item[lookupKey] === value;
            ));
        

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () 
            $(element).select2('destroy');
        );
    ,
    update: function (element) 
        $(element).trigger('change');
    

【参考方案1】：

select2 包装了一个表单字段，因此您不能直接发布 JSON 对象。如果可以的话，修改服务器端代码以使用 ID 可能是最简单的。

如果不是，您可以在 select2 构造函数中使用 id 参数，并返回您在服务器上解析的字符串化 JSON 对象。例如（未经测试）在您的data-bind：

select2: 
    tags: ko.toJS($parent.availableProducts),
    placeholder: 'select products',
    id: function(product)  return JSON.stringify(server_id: product.id, server_text: product.text) 

有关此方法的更多信息：

POST data in JSON format https://github.com/ivaynberg/select2/issues/852#issuecomment-13478644

也许将来我们会有JSON form submission。

【讨论】：

有道理 - 听起来让我的服务器端代码用户成为 ID 会容易得多。感谢您的澄清