0

私は JQueryUI オートコンプリートを設定するために適切なカスタム バインディングを使用していますが、それをカスタマイズして Item オブジェクトを返すようにしたいと考えています。これを別の配列にプッシュすることができます。これを行う方法について誰かが光を当てることができますか? ありがとう！

http://jsfiddle.net/rniemeyer/kEdT5/

    <input data-bind="jqAuto: { autoFocus: true }, jqAutoSource: myOptions, jqAutoValue: mySelectedOption, jqAutoSourceLabel: 'name', jqAutoSourceValue: 'id'" />

<hr/>

<div data-bind="text: ko.toJSON(mySelectedOption)"></div>



    //jqAuto -- additional options to pass to autocomplete
//jqAutoSource -- the array of choices
//jqAutoValue -- where to write the selected value
//jqAutoSourceLabel -- the property name that should be displayed in the possible choices
//jqAutoSourceValue -- the property name to use for the value
ko.bindingHandlers.jqAuto = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = valueAccessor() || {};
        var allBindings = allBindingsAccessor();
        var unwrap = ko.utils.unwrapObservable;

        //handle value changing
        var modelValue = allBindings.jqAutoValue;
        if (modelValue) {
            var handleValueChange = function(event, ui) {
                var valueToWrite = ui.item ? ui.item.value : $(element).val();
                if (ko.isWriteableObservable(modelValue)) {
                   modelValue(valueToWrite );  

                } else {  //write to non-observable
                   if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['jqAutoValue'])
                            allBindings['_ko_property_writers']['jqAutoValue'](valueToWrite );    
                }
            };

            options.change = handleValueChange;
            options.select = handleValueChange;  
        }

        //handle the choices being updated in a DO, so the update function doesn't have to do it each time the value is updated
        var mappedSource = ko.dependentObservable(function() {
            var source = unwrap(allBindings.jqAutoSource);
            var valueProp = unwrap(allBindings.jqAutoSourceValue);
            var labelProp = unwrap(allBindings.jqAutoSourceLabel) || valueProp;

            var mapped = ko.utils.arrayMap(source, function(item) {
                var result = {};
                result.label = labelProp ? unwrap(item[labelProp]) : unwrap(item).toString();  //show in pop-up choices
                result.value = valueProp ? unwrap(item[valueProp]) : unwrap(item).toString();  //value 
                return result;
            });
            return mapped;                
        });

        mappedSource.subscribe(function(newValue) {
           $(element).autocomplete("option", "source", newValue); 
        });

        options.source = mappedSource();

        $(element).autocomplete(options);
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        //update value based on a model change
        var allBindings = allBindingsAccessor();
        var modelValue = allBindings.jqAutoValue;
        if (modelValue) {
           $(element).val(ko.utils.unwrapObservable(modelValue));    
        }
    }
};

function Item(id, name) {
    return {
        id: ko.observable(id),
        name: ko.observable(name)
    };
}

var viewModel = {
    myOptions: ko.observableArray([
        new Item("One", "1 - One description"),
        new Item("Two", "2 - Two description"),
        new Item("Three", "3- Three description"),
        new Item("Four", "4- Four description"),
        new Item("Five", "5- Five description")
    ]),
    mySelectedOption: ko.observable()
};

ko.applyBindings(viewModel);
4

3 に答える 3

1

この投稿には、そのオートコンプリート バインディングの更新バージョンがありました:オートコンプリート コンボボックスを作成するには? . 入力ボックスに表示された値と書き込まれた値を分離しました。オフのままにjqAutoSourceValueすると、オブジェクト全体が書き込まれます。

ここにサンプルがあります：http://jsfiddle.net/rniemeyer/3vqpP/

于 2013-07-21T16:59:48.733 に答える
1

jQuery UI オートコンプリートの select 関数にロジックを追加できます。バインディング ハンドラー内に配置されます。

if (modelValue) {
    var handleValueChange = function(event, ui) {
        ...
    }

あなたの例にいくつかの変更を加えました。完璧ではありませんが、出発点になることを願っています。http://jsfiddle.net/dima_k/kEdT5/37/

于 2013-07-21T12:31:11.210 に答える
1

それを修正する小さなタイムアウトを追加できます。

...
select: function (event, ui) {
            var selectedItem = ui.item;

            window.setTimeout(function () {
                $(element).val(selectedItem.koObservableValue);
            }, 10);
        }

単純な値の場合

...
select: function (event, ui) {
            var selectedItem = ui.item;

            window.setTimeout(function () {
                $(element).val(selectedItem);
            }, 10);
        }
于 2013-11-05T14:03:41.843 に答える