CODEWITHSUNDEEP
javascriptjqueryknockout.js
Asle G
Asle G

Reputation: 588

How to get Knockout dialog to update

I got this dialog popup that I want to update with a selected Text.

<div data-bind="with: SelectedText">
    <div id="dialog" data-bind="dialog: {'autoOpen': false, 'title': textbatchTitle }, dialogVisible: $root.isMetadataDialogOpen">
        <div class="metadata">
            <label for="textbatchTitle">Title:</label> <span class="rotten">Why isen´t this updated with SelectText after pushing "Add New Text"?"</span>
            <input type="text" name="textbatchTitle" data-bind="value: textbatchTitle, valueUpdate: 'afterkeydown'" />
        </div>
    </div>
</div>

It seems the dialog does´t respond to the "with"-binding?

This is my custom binding:

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(ko.toJS(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"),
            options = valueAccessor();

        //don't call dialog methods before initilization
        if (dialog) {
            $el.dialog(shouldBeOpen ? "open" : "close");

            for (var key in options) {
                if (ko.isObservable(options[key])) {
                    $el.dialog("option", key, options[key]());
                }
            }
        }
    }
};

What is wrong with this? http://jsfiddle.net/qFjRW/

Upvotes: 0

Views: 145

Answers (1)

sroes
sroes

Reputation: 15053

You didn't include jquery ui as an external source:

Uncaught TypeError: Object [object Object] has no method 'dialog'

See http://jsfiddle.net/FXTHn

EDIT:

Since you're using the with: SelectedText outside of the dialog, it won't call update when SelectedText changes. Try placing it inside:

<div id="dialog" data-bind="dialog: {'autoOpen': false, 'title': SelectedText().textbatchTitle }, dialogVisible: $root.isMetadataDialogOpen">
    <div data-bind="with: SelectedText">
        <div class="metadata">
            <label for="textbatchTitle">Title:</label> <span class="rotten">Why isen´t this updated with SelectText after pushing "Add New Text"?"</span>
            <input type="text" name="textbatchTitle" data-bind="value: textbatchTitle, valueUpdate: 'afterkeydown'" />
        </div>
    </div>
</div>

http://jsfiddle.net/FXTHn/1/

Upvotes: 1

Related Questions