I've got a custom binding to handle autocomplete, and when a user selects an item from the autocomplete I talk to the server and replace the text_field with a shortened name. The problem is that this triggers the 'update' function of my custom binding a second time.
Knockout.js code (edit: Note the following is CoffeeScript) :
ko.bindingHandlers.ko_autocomplete =
init: (element, params) ->
$(element).autocomplete(params())
update: (element, valueAccessor, allBindingsAccessor, viewModel) ->
unless task.name() == undefined
$.ajax "/tasks/name",
data: "name=" + task.name(),
success: (data,textStatus, jqXHR) ->
task.name(data.short_name)
Task = ->
@name = ko.observable()
@name_select = (event, ui) ->
task.name(ui.item.name)
false
task = Task.new()
View
= f.text_field :name, "data-bind" => "value: name, ko_autocomplete: { source: '/autocomplete/tasks', select: name_select }"
Is there a way to apply a throttle to a custom binding?
I just want to stop the custom bindings 'update' function from triggering a second time when I set the task.name to the short_name sent back from the server.
In general, I've found a pattern like this to work for me
ko.bindingHandlers.gsExample =
update: (element, valueAccessor, allBindingsAccessor, viewModel) ->
args = valueAccessor()
# Process args here, turn them into local variables
# eg.
span = args['span'] || 10
render = ko.computed ->
# Put your code in here that you want to throttle
# Get variables from things that change very rapidly here
# Note: You can access variables such as span in here (yay: Closures)
some_changing_value = some_observable()
$(element).html(some_changing_value)
# Now, throttle the computed section (I used 0.5 seconds here)
render.extend throttle : 500
# Cause an immediate execution of that section, also establish a dependancy so
# this outer code is re-executed when render is computed.
render()