如何在使用自定义绑定时更新Knockout ViewModel

Question

我正试图将一个spinbox(一个带有递增和递减按钮的输入)连接到KO，但在确保用户与控件交互时我的ViewModel正确更新时遇到了一些问题。

我使用的特定控件是Fuel UX的SpinBox：http://getfuelux.com/javascript.html#spinbox

数据绑定本身被附加到包装div，因为它是整个控件的容器：

<div id="daysToComplete-spinner" data-initialize="spinbox" class="spinbox input-group" style="width: 150px;" data-bind="spinbox: daysToComplete, spinboxOptions: {min: 0, max: 180 }">
<input class="form-control spinbox-input" placeholder="Days">
<div class="spinbox-buttons input-group-btn">
<button type="button" class="btn btn-cancel spinbox-up">
<span class="fa fa-angle-up"></span><span class="sr-only">Increase</span>
</button>
<button type="button" class="btn btn-cancel spinbox-down">
<span class="fa fa-angle-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>

我写了一个绑定处理程序，它似乎可以运行和构建控件，但有几件事我很难实现：

• 我想注册一个事件处理程序。当用户单击向上或向下按钮(跨度)时，我需要确保ViewModel的属性用新值更新。我试过使用valueAccess()，但它给了我值，而不是我期望的可观察属性(在阅读了ko网站上的文档后)
• 我想确保，如果用户在输入框中键入数字，ViewModel的属性就会更新。数据绑定在div上，所以我假设knockout不会"知道"div内部的输入已经更改。。。我该如何做到这一点？相同的事件处理程序

以下是我迄今为止在处理程序上得到的信息：

$(function () {
ko.bindingHandlers.spinbox = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var options = allBindingsAccessor().spinboxOptions || {};
$(element).spinbox(options);
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) {
$(element).spinbox("value", value);
}
ko.utils.registerEventHandler(element, "changed.fu.spinbox", function (event, value) {
var modelValue = valueAccessor(),
modelValue(value); //it crashes here "not a function"
});
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).spinbox("value", value);
console.log(value);
}
};
});

如有任何关于我遗漏的内容的指导，我们将不胜感激。

Answer 1

我不知道你的视图模型是什么样子的，但你能确保在之前的操作中没有用值覆盖可观察对象吗。

如果在某个时候你做了这样的事情：

viewmodel.daysToComplete=4

然后daysToComplete属性不再是可观察的。因此，valueAccess()不会返回observable，而是返回4，这就是您所描述的。