Question

目前使用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。

谢谢，

克里斯。

Answer 1

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

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插件应用于select，每当viewmodel更改时，它都会更新底层select和msDropDown生成的UI元素。此外，在UI中更新所选项目时，它会持续返回到视图模型。

感谢您的所有帮助，希望其他尝试使用Knockout JS和msDropDown的人会发现这有用。

克里斯。

Answer 2

正如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

Answer 3

要创建钩子，您subscribe到observable（在VM内）：

self.Type.subscribe(function(newValue) {
    // Use "newValue" to read the new value, which you can use
    // to bind to msDropDown / the UI
});

使用msDropDown进行KnockoutJS

3 个答案: