Javascript 如何在使用自定义绑定时更新Knockout ViewModel
我试图将一个spinbox(带有递增和递减按钮的输入)连接到KO,但在确保用户与控件交互时ViewModel正确更新方面遇到了一些问题 我使用的特定控件是Fuel UX的SpinBox: 数据绑定本身附加到包装div,因为包装div是整个控件的容器:Javascript 如何在使用自定义绑定时更新Knockout ViewModel,javascript,knockout.js,viewmodel,fuelux,Javascript,Knockout.js,Viewmodel,Fuelux,我试图将一个spinbox(带有递增和递减按钮的输入)连接到KO,但在确保用户与控件交互时ViewModel正确更新方面遇到了一些问题 我使用的特定控件是Fuel UX的SpinBox: 数据绑定本身附加到包装div,因为包装div是整个控件的容器: <div id="daysToComplete-spinner" data-initialize="spinbox" class="spinbox input-group" style="width: 150px;" data-bind="s
<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是什么样子,但您能否确保在以前的操作中没有用值覆盖可观察对象 如果在某个时候你做了这样的事情: viewmodel.daysToComplete=4 那么daysToComplete属性就不再是可观察的了。 因此,valueAccessor()将不会返回可观察值,而是返回您似乎描述的4
$(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);
}
};
});