6

ノックアウト js と選択したプラグイン (https://github.com/harvesthq/chosen) を使用して、見栄えの良い複数選択を試みています。

さまざまな方法を試しましたが、使用しているデータで複数選択が機能しません。複数選択をクリックすると、オプション バインディングに正しいデータが含まれていても、値が表示されません。

HTML:

<select multiple="multiple" data-bind="options: allCustomers, 
selectedOptions: event().customers, optionsText: 'name', 
optionsValue: 'id', chosen: true " ></select>​

ビュー モデルの簡略化されたバージョン:

    function Event()
    {
        this.customers = ko.observableArray();
    };                     

    //for chosen plugin
    ko.bindingHandlers.chosen = {
        update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
            $(element).chosen();
        }
    }

    function ViewModel()
    {   
        this.event = ko.observable(new Event());
        this.allCustomers = ko.observableArray();
    };

    var viewModel = new ViewModel();

    $.getJSON("/get_json", function(data) 
    {                                  
        for (var c = 0; c < data.customers.length; c++)
        {
            viewModel.allCustomers.push(data.customers[c]);
        }   
    });

    ko.applyBindings(viewModel);

PHP:

function get_json()
{
    $eventData = array(
        'customers' => array(array('name' => 'Bob', 'id' => 1), array('name' => 'John', 'id' => 2)),
        'moreData' => array(),
        'evenMoreData' => array()
        );

    echo json_encode($eventData);
}

これは選択されたスタイルの選択ボックスを示していますが、それをクリックしてもオプションは表示されません。

顧客のビュー モデルでローカル JS 配列を作成し、それを allCustomers に渡すと、複数選択が正しく機能するため (私のjsfiddleを参照)、サーバーからデータを取得することと関係がありますが、私はこれを見つめてきました問題が見えない間！

どんな助けでも大歓迎です

4

2 に答える 2

16

@Tyrsius が最初のバインド後にデータを更新していない可能性があると示唆した後、問題を発見しました。

$(element).trigger("liszt:updated");次のようにカスタムバインディングに追加しました：

ko.bindingHandlers.chosen = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
        $(element).chosen();
        $(element).trigger("liszt:updated");
    }
}
于 2012-07-06T20:56:52.347 に答える
1

受け入れられたバージョンのコードは、何らかの理由で機能しませんでした。おそらく、liszt:updatedコマンドが更新されるように選択されていないためです。ここのドキュメントに基づいて、私は自分のバージョンを書きました：

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).chosen({ width: "95%", placeholder_text_multiple: "Select..." });
        var value = ko.unwrap(valueAccessor());
    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.unwrap(valueAccessor());
        $(element).trigger("chosen:updated");

    }
}
于 2014-02-21T18:11:15.047 に答える