ajax queue
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<button data-bind="click: AjaxQueue.add">add</button>
<input type="text" data-bind="value: Val" />
<button data-bind="click: function(){AjaxQueue.remove(Val());}">remove</button>
<p data-bind="text: AjaxQueue.fetching"></p>
JavaScript
var ViewModel = {
AjaxQueue: function() {
var queue = {
length: ko.observable(0)
};
function randomMax8HexChars() {
return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
}
function generateRandomId() {
return randomMax8HexChars() + randomMax8HexChars();
}
return {
add: function() {
var rand = generateRandomId();
queue[rand] = true;
queue.length(queue.length()+1);
console.log(rand);
console.log(queue.length());
return rand;
},
remove: function(id) {
if (id !== 'length' && queue.hasOwnProperty(id)) {
console.log(delete queue[id]);
queue.length(queue.length()-1);
}
},
fetching: ko.computed(function() {
return queue.length() !== 0;
})
};
}(),
Text: ko.observable(),
Val: ko.observable()
};
ko.applyBindings(ViewModel);