jquery - 使用msDropDown的KnockoutJS

当前使用msDropDown 3.2使控件看起来很漂亮，但是由于所开发应用程序的性质，我研究了使用Knockout JS来处理UI数据绑定。不幸的是，每当我更改视图模型上的属性时，它都会更改选择但不更改呈现的控件（我知道更改呈现的控件所需的代码，但是不确定如何将其挂钩到Knockout中）。

是否有人集成了这两个工具，如果是的话，您如何使它们完美地结合在一起玩？

编辑：

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可能会调用的事件，以便我可以确定它是否为select并调用一些msDropDown特定代码来更新UI。

谢谢，

克里斯。

最佳答案

感谢您的所有答复，但是我设法找到了一个解决方案，该方案涉及创建自己的活页夹：

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中的选定项目时，它会保留回到视图模型。

感谢您的所有帮助，希望其他尝试将Knockout JS与msDropDown一起使用的人会有所帮助。

克里斯。