1

現在、msDropDown 3.2 を使用してコントロールをきれいに表示していますが、開発中のアプリケーションの性質上、Knockout JS を使用して UI-Data Binding を処理することを検討しています。残念ながら、ビューモデルのプロパティを変更すると、選択が変更されますが、レンダリングされたコントロールは変更されません (レンダリングされたコントロールを変更するために必要なコードは知っていますが、これをノックアウトにフックする方法がわかりません)。

この 2 つのツールを統合した人はいますか。

編集：

HTML:

<select data-bind="value: Type">
   <option value="1">First</option>
   <option value="2">Second</option>
   <option value="3">Third</option>
   <option value="4">Fourth</option>
</select>

JavaScript:

function ViewModel() {
    var self = this;
    self.Name = ko.observable();
    self.Type = ko.observable();
    self.IsVisible = ko.computed(function () {
        return this.Type() == 1;
    }, this);
}

var vm = new ViewModel();

ko.applyBindings(vm);

$(document).ready(function () {
    $("select").msDropDown();
});

上記のコードからわかるように、ViewModel インスタンスを作成し、バインディングを適用して msDropDown を開始しています。

私が次に呼び出す場合は、次のように呼び出します。

vm.Type("2");

次に、基になる選択を更新しますが、msDropDown コントロールのフロント エンドは更新しません。基本的に、プロパティを変更するときに Knockout が呼び出す可能性のあるイベントにフックする方法が必要です。これにより、それが選択であるかどうかを判断し、msDropDown 固有のコードを呼び出して UI を更新できます。

ありがとう、

クリス。

4

3 に答える 3

2

すべての回答に感謝しますが、独自のバインダーを作成することで解決策を見つけることができました。

ko.bindingHandlers.setValue = {
    init: function (a, b, c) {
        var value = ko.utils.unwrapObservable(b());

        if (typeof value == 'undefined') {
           value = $(a).find("option").first().val();
        }
        $(a).val(value).change(function(){
            var observable = b();
            observable($(this).val());
        }).msDropdown();
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        // Get the value from the observable and set the value on the msDropDown.
        $(element).msDropDown().data("dd").set("value", valueUnwrapped);
    }
};

function ViewModel() {
    var self = this;
    self.Name = ko.observable();
    self.Type = ko.observable();
    self.IsVisible = ko.computed(function () {
        return this.Type() == 1;
    }, this);
}

var vm = new ViewModel();

ko.applyBindings(vm);

次にHTMLで

<select name="myselect" data-bind="setValue: Type">
    <option value="1">1</option>
    <option value="2">2</option
    <option value="3">3</option
    <option value="4">4</option
</select>

これにより、msDropDown プラグインが選択に適用され、ビューモデルが変更されるたびに、基になる選択と msDropDown によって生成された UI 要素が更新されます。また、UI で選択したアイテムを更新すると、ビューモデルに保持されます。

ご協力いただきありがとうございます。msDropDown と共に Knockout JS を使用しようとしている他のユーザーの役に立てば幸いです。

クリス。

于 2012-12-11T10:55:43.053 に答える
1

MarcoK が言うように、変更を購読する必要があります

静的ドロップダウンを使用しないと仮定します (間違っている可能性があります)
。この場合、UI で afterAdd バインディングを使用して、updateUI メソッドを呼び出すこともできます。基本的に、各アイテムが追加された後、updateUI関数が呼び出されmsDropDown()ます（アイテムが正しく表示されるように を再適用します

function ViewModel() {
    var self = this;
    self.Name = ko.observable();
    self.Type = ko.observable();
    self.IsVisible = ko.computed(function () {
        return this.Type() == 1;
    }, this);

    self.updateUI = function(){
        $("select").msDropDown();
    }

    self.Type.subscribe(function(newValue) {
        updateUI();
    });

    //just added this as I assume you will be using a generated options list
    self.myOptions = ko.observableArray();
}

マークアップは次のようになります。

<select data-bind="value: Type, options: myOptions, afterAdd: updateUI">
</select>

テンプレート バインディングの詳細: http://knockoutjs.com/documentation/template-binding.html

于 2012-12-10T12:24:32.297 に答える
0

フックを作成するsubscribeには、（VM内の）オブザーバブルに移動します。

self.Type.subscribe(function(newValue) {
    // Use "newValue" to read the new value, which you can use
    // to bind to msDropDown / the UI
});
于 2012-12-10T11:55:25.830 に答える