Question

I’m using the latest versions of knockout.js and jquery. I’m trying to create a jquery dialog that opens and closes whenever an specific ko.observable has a value. I based my implementation on the code in this jsfiddle, http://jsfiddle.net/rniemeyer/WpnTU/, which I found in this Knockout.js forum, https://groups.google.com/d/msg/knockoutjs/XIaQMNHjy7Q/BpfDU5inKVQJ.

However, this approach only works IF I include the now deprecate jquery-tmpl.js plugin (version 1.0.0pre). I’ve distilled my problem down to two jsfiddles, a working version (http://jsfiddle.net/LhEnV/29/), and a broken version (http://jsfiddle.net/gygh3/1/). The only difference being that jquery-tmpl.js is not included in the second version.

The root of the problem is that the observable which the dialog and its contents are dependent on isn’t set when I first load the page. Thus, the properties that the template binds to aren’t available, which results in an error. Including jquery-tmpl before knockout cures the problem, so I’m assuming the knockout templating engine changes it’s behavior when jquery-tmpl is available. However, I don’t want to rely on a deprecated plugin.

Is there a better way to bind a jquery UI dialog and it’s contents to the ViewModel?

Answer 1

Just change this:

<script id="newDialogTmpl" type="text/html">
    Add <span data-bind="text: displayName"></span>?
</script>
​

To that:

<script id="newDialogTmpl" type="text/html">
    <!-- ko if: $data -->
    Add <span data-bind="text: displayName"></span>?
    <!-- /ko -->
</script>

At the first time your newThing prop equals null so it’s trigger refference error. You should check if $data is not null then render template if null – do nothing