我现在正在使用带有KnockoutJS和Durandal的jQuery UI旋转器。我按照答案/例子 here创建一个自定义绑定,负责初始化微调器并观察对微调器所做的更改。
现在,我将其保存为 lib 文件夹中的常用模块,由未来需要使用微调器的模块调用。我的问题是,我希望在此特定页面上检索微调器/< input>的值。每次微调器和数量更新时进行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. inspector中显示的system.log),但是在我的page.js中,我不知道在何处以及如何调用捕获新数量的函数用于ajax调用。
我意识到我对KnockoutJS的理解和数据绑定仍然是模糊的(几周前刚刚开始),所以如果有人能告诉我应该从哪里开始,我将非常高兴。先感谢您。
答案 0 :(得分:1)
让您的AJAX通话和您的微调器彼此无关。下面,我将向您展示我们是如何做到的,但是使用SpinJS。尽管图书馆不同,但校长是一样的。
这是我们对微调器的自定义绑定:
ko.bindingHandlers.spinner = {
init: function(element, valueAccessor) {
var options = ko.unwrap(valueAccessor());
var opts = {
lines: options .lines || 8,
length: options .length || 3,
width: options .width || 4,
radius: options .radius || 6,
color: options .color || '#FFF',
speed: options .speed || 1,
trail: options .trail || 100,
shadow: options .shadow == undefined ? false : value.shadow,
zIndex: options .zIndex || 2000
};
var spinner = new Spinner(opts).stop();
$(element).data(element.id, spinner);
},
update: function(element, valueAccessor) {
var options = ko.unwrap(valueAccessor()),
isSpinning = options .isSpinning,
positioning = options .positioning || 'manual',
spinner = $(element).data(element.id);
if (isSpinning) {
if (positioning == 'manual') {
spinner.spin();
$(element)[0].appendChild(spinner.el);
} else if (positioning == 'auto') {
spinner.spin(element);
}
} else {
spinner.stop();
}
}
这是一个使用自定义绑定的视图:
<div data-bind="visible: isFetchingOpportunities()">
<div id="activitySpinner" class="ts-ajax-spinner" data-bind="spinner: { isSpinning: isFetchingOpportunities() }">
</div>
</div>
这里是支持上面视图的相应viewModel:
this.isFetchingOpportunities(true);
var that = this;
$.when(dataservice.getData(options, getFunction, modelmapper.opportunity))
.then(function() {
that.isFetchingOpportunities(false);
});
现在,我们已将AJAX调用封装到数据服务中,而数据服务又利用了AmplifyJS。但是,校长也是如此。您可以直接轻松地进行AJAX调用。
这有意义吗?
答案 1 :(得分:1)
如果我理解正确,我认为您需要做的就是订阅数量observable并在该函数中进行ajax调用。类似的东西: -
注意:我将ko.utils.registerEventHandler
从spinchange
更改为spinstop
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, 'spinstop', 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.';
if (isNaN(parseInt(value))) {
alert(msg);
}
if (value !== current && !isNaN(parseInt(value))) {
$(element).spinner("value", value);
}
}
};
var Vm = function() {
var self = this;
self.quantity = ko.observable(0);
self.quantity.subscribe(updateData);
function updateData(newValue) {
//do ajax call here
alert(newValue);
}
return self;
};
ko.applyBindings(new Vm());
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<p class="qty">
<input class="spinner" data-bind="spinner: quantity, spinnerOptions: { min: 1, numberFormat: 'n' }" />
<a class="remove" href="#">Remove</a>
</p>
&#13;