KnockoutJS与msDropDown

Question

目前使用msDropDown 3.2使控件看起来很漂亮，但是由于正在开发的应用程序的性质，我已经研究了如何使用Knockout JS来处理UI数据绑定。不幸的是，每当我更改视图模型上的属性时，它都更改的是select，而不是呈现的控件(我知道更改呈现控件所需的代码，但不确定如何将其连接到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");

然后它将更新基础select，而不是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);

然后在中

<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，每当视图模型更改时，它都会更新基础select和msDropDown生成的UI元素。另外，当更新UI中的选定项时，它会持久地返回到视图模型。

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

克里斯。

Answer 2

正如MarcoK所说，您需要订阅更改

我假设你不会使用静态下拉(我可能是错的)

在本例中，您还可以在用户界面中使用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到可观察的(在VM中)：

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