【发布时间】：2015-03-12 13:10:08
【问题描述】：
我现在正在使用带有 KnockoutJS 和 Durandal 的 jQuery UI 微调器。我遵循了答案/示例 here 创建一个自定义绑定，负责初始化微调器并观察对微调器所做的更改。
现在，我已将其保存为要加载到 lib 文件夹中的通用模块，由将来需要使用微调器的任何模块调用。我的问题是，我想在这个特定页面上检索 spinner/ 的值，以便在每次微调器时进行 ajax 调用，从而更新数量。我知道我不可能将我的自定义 ajax 代码放在公共模块中，但我不知道放在哪里。
这是进行数据绑定的 HTML：
<p class="qty">
<input class="spinner" data-bind="spinner: quantity, spinnerOptions: { min: 1, numberFormat: 'n' }" />
<a class="remove" href="#">Remove</a>
</p>
这是与 HTML 对应的代码：
function Item(data) {
(...)
self.updateQuantity = function(){
$.ajax(apiUrl + self.id, {
data: self.quantity,
type: 'patch',
contentType: 'application/json',
success: function(result) {
alert(result);
}
});
};
}
(...)
return {
checkedOutItems: checkedOutItems, //checkedoutItems is an array of Item that's passed to the HTML, which can call Item's updateQuantity method
(...)
}
这是我根据上面的链接构建的通用模块：
define(function(require) {
var system = require('durandal/system'),
app = require('durandal/app'),
ko = require('knockout');
ko.bindingHandlers.spinner = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().spinnerOptions || {};
$(element).spinner(options);
//handle the field changing
ko.utils.registerEventHandler(element, 'spinchange', function () {
var observable = valueAccessor();
observable($(element).spinner('value'));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).spinner('destroy');
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).spinner('value'),
msg = 'You have entered an Invalid Quantity. \n Please enter at least 1 or remove this item if you do not want to include it in the shopping cart.';
system.log(value);
if(isNaN(parseInt(value))) {
alert(msg);
}
if (value !== current && !isNaN(parseInt(value))) {
$(element).spinner("value", value);
}
}
};
});
据我所知，我应该有类似 data-bind="value: quantity, click: updateQuantity" 的东西，以便在可观察数量发生变化时立即调用 updateQuantity 函数。但是，现在我正在使用 spinner 自定义绑定，我不再确定如何调用 updateQuantity 函数。每个更改都将由公共模块中的代码捕获（如 Chrome 检查器中的 system.log 所示），但在我的 page.js 中，我不知道在哪里以及如何调用捕获新数量的函数在ajax调用中使用。
我意识到我对 KnockoutJS 和数据绑定的理解仍然很模糊（几周前才开始），所以如果有人能告诉我应该从哪里开始，我将非常高兴。先感谢您。
【问题讨论】：
-
我不确定这是否有帮助，但如果您可以从自定义微调器绑定的更新回调函数中访问 ViewModel 的绑定上下文，并且
updateQuantity()函数在 ViewModel 内部，那么我看不出你为什么不能打电话给updateQuantity()from within the update callback。
标签： ajax data-binding knockout.js durandal