gpt4 book ai didi

javascript - 使用自定义绑定(bind)时如何更新 Knockout ViewModel

转载 作者:行者123 更新时间:2023-11-29 17:58:04 24 4
gpt4 key购买 nike

我正在尝试将旋转框(带有递增和递减按钮的输入)连接到 KO,但在确保用户与控件交互时我的 ViewModel 正确更新方面遇到了一些麻烦。

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

数据绑定(bind)本身附加到包装 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>

我写了一个绑定(bind)处理程序,它似乎可以运行并构建控件,但是有几件事我很难实现:

  • 我想注册一个事件处理器。当用户单击向上或向下按钮(跨度)时,我需要确保使用新值更新 ViewModel 的属性。我试过使用 valueAccessor(),但它给了我值(value),而不是我期望的可观察属性(在阅读 ko 网站上的文档之后)。
  • 我想确保如果用户在输入框中键入数字,ViewModel 的属性会更新。数据绑定(bind)在 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);
}
};
});

任何关于我遗漏的指导都将不胜感激。

最佳答案

我不知道您的 View 模型是什么样的,但您能否确保在之前的操作中您没有用值覆盖可观察对象。

如果在某个时候你做了类似的事情:

viewmodel.daysToComplete = 4

然后 daysToComplete 属性不再是可观察的。结果 valueAccessor() 不会返回可观察值,而是返回 4,这正是您所描述的。

关于javascript - 使用自定义绑定(bind)时如何更新 Knockout ViewModel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37329819/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com