Binding only works after browser refresh

Question

I have a custom binding that I created with the help of How to refresh Footable that is bound with Knockout?.

I have one page where the binding is not called when the page is first loaded, but is called if I refresh the page. (Push F5) For all of the other pages I have, the binding work as expected and I've never seen this behavior anyplace else.

What I've noticed so far:

As far as I can tell, the data is the same in the View Model
When I put a break point in the init function of the binding source code, the break point is hit on the times that it works. When it doesn't work, the break point is never hit. I really need the preprocess to be called, but I've been putting the break point in the init because it's at the top of the file. I get the same results if I put the break point in the preprocess function.
When I put a break point outside and above the init function, the break point is hit every time. Meaning the binding is created
This is for a table, when I put a span above the table and display the $data with toJSON(), the data looks the same for when it works or not.

I have tried to create a Plunk to demonstrate this, but I'm not having any luck. (Meaning, every time I try to simplify the scenario, it always works)

Here's what the html looks like: (The data-bind looks the same in both cases)

<tbody data-bind="footable: items">
    <tr class="footable-even" style="display: table-row;">
        <td class="footable-visible footable-first-column"><span class="footable-toggle"></span></td>
        <td class="footable-visible"></td>
        <td class="footable-visible"></td>
        <td class="footable-visible footable-last-column"></td>    
    </tr>
</tbody>

I'm testing with a result set that only has one row.

So, what would cause a binding to not be called? Where else could I put a break point to see what is going on?

Is there any error output in the web console when it doesn't do what you're expecting? Are you making sure that the page is loaded before applying bindings? — adamdc78, Jul 22 '14 at 22:41
@adamdc78, Nope. As you can see in each there are no data-bind(s). Before I removed those I would get an error, but that was due to the for-each, inside of the preprocess, not being called. So I simplified the s and now I get no errors in the console, but the custom binding is still not called — Jeff, Jul 22 '14 at 22:59
You have to share more code, the html markup is not enough to investigate. If possible please create a demo link (with jsFiddle for example) — GôTô, Jul 23 '14 at 11:51

score 0 · Answer 1 · answered Jul 23 '14 at 20:05

In knockout-3.1.0.debug.js, I was able to track down this code: (Line 2455)

ko['getBindingHandler'] = function(bindingKey) {
    return ko.bindingHandlers[bindingKey];
};

During the times when the page doesn't work, the custom binding has not been loaded and so this function returns undefined. (As it should) So the problem is not with knockout at all, but with the order of execution.

Now to figure out why the timing of when this custom binding is loaded is different for this one page but not any of the others...

Binding only works after browser refresh

1 Answers1