使用自定義綁定時如何更新Knockout ViewModel

Question

我正在嘗試將旋轉框（帶有增量和減量按鈕的輸入）連接到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的Property。 我已經嘗試過使用valueAccessor（），但是它給了我值，而不是我所期望的可觀察屬性（在ko網站上閱讀了文檔之后）。
• 我要確保如果用戶在輸入框中鍵入數字，則ViewModel的屬性將更新。 數據綁定位於div上，所以我假設敲除不會“知道” 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屬性不再是可觀察的。 結果，valueAccessor（）將不會返回可觀察到的值，而是您似乎要描述的4。