StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It looks like writing to the widget to .data("dialog") and then trying to operate on it is causing an issue. Here is a sample where <code>.data</code> is not used and the open/close is called based on the element: <a href="http://jsfiddle.net/rniemeyer/durKS/">http://jsfiddle.net/rniemeyer/durKS/</a></p> <p>Alternatively, I like to work with the dialog in a slightly different way. I like to control whether the dialog is open or closed by using an observable. So, you would use a single binding on the dialog itself. The <code>init</code> would initialize the dialog, while the <code>update</code> would check an observable to see if it should call open or close. Now, the open/close buttons just need to toggle a boolean observable rather than worry about ids or locating the actual dialog.</p> <pre><code>ko.bindingHandlers.dialog = { init: function(element, valueAccessor, allBindingsAccessor) { var options = ko.utils.unwrapObservable(valueAccessor()) || {}; //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom setTimeout(function() { options.close = function() { allBindingsAccessor().dialogVisible(false); }; $(element).dialog(options); }, 0); //handle disposal (not strictly necessary in this scenario) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $(element).dialog("destroy"); }); }, update: function(element, valueAccessor, allBindingsAccessor) { var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible), $el = $(element), dialog = $el.data("uiDialog") || $el.data("dialog"); //don't call open/close before initilization if (dialog) { $el.dialog(shouldBeOpen ? "open" : "close"); } } }; </code></pre> <p>Used like: </p> <pre><code><div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test' }, dialogVisible: isOpen">foo dialog</div> </code></pre> <p>Here is a sample: <a href="http://jsfiddle.net/rniemeyer/SnPdE/">http://jsfiddle.net/rniemeyer/SnPdE/</a></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