用淘汰赛设置select2 ajax的初始值答案

【问题标题】：Set initial value of select2 ajax with knockout用淘汰赛设置select2 ajax的初始值
【发布时间】：2014-04-16 08:49:28
【问题描述】：

我在设置 select2 ajax 控件的初始值时遇到问题。在这种情况下，我使用 CI 和淘汰赛。按下时我的代码将在表格正文中添加一行，并且我在表格单元格中使用 select2 ajax。

我的 HTML：

<tbody data-bind="foreach: rows">
<tr>
    <td><input name="id_item[]" class="form-control big-drop" type="hidden" data-bind="value: id_item,select2: { minimumInputLength: 1, query: $root.list_item,formatResult: $root.itemFormatResult,formatSelection: $root.itemFormatSelection, allowClear: true}"></td>
    <td><input placeholder="qty" name="qty[]" class="form-control number text-right" data-bind="value: qty,number: qty, numberOptions: {value: true, number_of_comma: 0}, valueUpdate: 'afterkeydown'"></td>
    <td><input placeholder="price" name="price[]" class="form-control number text-right" data-bind="value: price,number: price, numberOptions: {value: true, number_of_comma: 2}, valueUpdate: 'afterkeydown', formatNoMatches: no_match_format"></td>  
    <td><button data-bind="click: $root.removeRow" class="btn btn-danger"><i class="fa fa-minus"></i></button></td>
</tr>
</tbody>

我的 KO 模型：

function Row(id_item, qty, price) {
    var self = this;
    self.id_item = ko.observable(id_item);
    self.qty = ko.observable(qty);
    self.price = ko.observable(price);

    ko.computed(function () {
        var item = self.id_item();

        get_satuan(item).done(function (data) {
            if (!isNaN(data.price)){
                self.harga(format_number(data.price, ''));
            }
        });
    });
}

var RowModel = function(rows) {
    var self = this;

    var default_array = ko.observableArray();
    if (detail.length > 0){
        $.each(detail, function(key, value){
            default_array.push(new Row(value.id_item, value.qty, value.price));
        });
    }

    self.rows = default_array;
    self.addRow = function() {
        self.rows.push(new Row('TUT',"","1"));
    };

    self.removeRow = function(row) { self.rows.remove(row) }

    self.list_item = function (query) {
        $.ajax({
            url: 'link to get json',
            type: 'POST',
            dataType: 'json',
            data: {q: query.term},
            success: function (data) {
                query.callback({
                    results: data
                });
            }
        });
    };
    self.itemFormatResult = function(item) {
        var markup = "<table class='movie-result'><tr><td><div class='movie-title'>";
        markup += "<b>" + item.id + "</b>";
        markup += "<br>" + item.item_name;
        markup += "<br>" + item.unit;
        markup += "</div></td></tr></table>";
        return markup;
    }
    self.itemFormatSelection = function (item) {
        return item.item_name;
    };
};

ko.applyBindings(new RowModel());

一切正常： 1.添加新行 2. 使用 select2 选择项目工作正常 3. 选择项目后，价格会根据项目选择而变化，工作正常

问题出在这段代码中：

self.addRow = function() {
        self.rows.push(new Row('TUT',"","1"));
};

设置select2的值后，select2不显示基于itemFormatSelection的item_name。请帮助我，非常感谢。对不起我的英语不好

【问题讨论】：

标签： javascript jquery ajax codeigniter knockout.js

【解决方案1】：

问题解决了，我使用 select2 的 initSelection 来做这件事。调用 initSelection 时执行 ajax 调用以获取 JSON 中的值。

这是我的 JS 代码：

self.init_item = function (id_item, callback) {
    var id = $(id_item).val();
    $.ajax({
        url: 'link to get JSON',
        type: 'POST',
        dataType: 'json',
        data: {id: id},
        success: function (data) {
            callback(data);
        }
    });
};

添加这个 select2 数据绑定：

initSelection: $root.init_item

就是这样

【讨论】：