StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Adding this here because this is what most people find when searching on issues with jQuery UI Dialog and Knockout JS.</p> <p>Just another option to avoid the "double binding" issue explained in the above answer. For me, the setTimeout() was causing other bindings to fail that require the dialog to be initialized already. The simple solution that worked for me was making the following changes to the accepted answer:</p> <ol> <li><p>Add class='dialog' to any elements using the custom dialog binding.</p></li> <li><p>Call this after page load, but before calling ko.applyBindings():</p> <p>$('.dialog').dialog({autoOpen: false});</p></li> </ol> <p>Remove the <code>setTimeout</code> inside the <code>init</code> of the custom binding, and just call the code directly.</p> <p>Step 2 makes sure that any jQuery UI Dialogs have been initialized prior to any KO bindings. This way jQuery UI has already moved the DOM elements, so that you don't have to worry about them moving in the middle of applyBindings. The init code still works as-is (other than removing setTimeout) because the dialog() function will just update an existing dialog if already initialized.</p> <p>An example of why I needed this is due to a custom binding I use to update the title of the dialog:</p> <pre><code>ko.bindingHandlers.jqDialogTitle = { update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).dialog('option', 'title', value); } }; </code></pre> <p>I use a separate binding for this instead of the update function for the main dialog binding, because I only want to update the title, not other properties such as height and width (don't want the dialog to resize just because I change the title). I suppose I could also use update and just remove height/width, but now I can do both/either and not worry about the setTimeout being completed or not.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload