Re: Using Twitter Bootstrap modal dialogs with Knockout.js

[Brendan McLoughlin]

Well done Andrew. I'll be sure to refer to this in the future when designing interactions between viewModels. I especially like the use of a deferred to create two separate paths for success and cancel actions.

I'd recommend calling ko.cleanNode on your modal before removing it from the dom inside of whenUIHiddenThenRemoveUI. This will help prevent memory leaks by releasing all of the viewModel's references to the node.

-Brendan

On Thu, Nov 15, 2012 at 11:15 AM, Andrew Davey <and...@equin.co.uk> wrote:

I've written a blog post that shows a nice way to use Twitter Bootstrap's modal dialog plugin in a Knockout-based application, without polluting your views models with DOM code.

The techniques covered include using ko.renderTemplate to dynamically generate UI, and using jQuery's deferred object to elegantly wait for the modal's return value.

You can read the post here:

http://aboutcode.net/2012/11/15/twitter-bootstrap-modals-and-knockoutjs.html

What do you think about the approach? Are there any improvements or enhancements you'd like to see?

[Andrew Davey]

Thanks Brendan, good catch on the need to call ko.cleanNode!

[Casey Corcoran]

I believe the best way to handle this kind of thing is with a custom binding...

Here's a quick example, let me know what you think:

http://jsfiddle.net/snaptopixel/vDZQk/

Casey Corcoran

casey.c...@gmail.com

[dmoo...@googlemail.com]

In this fiddle, if you don't exit via one of the two buttons - ie clicking on the black background, it then seems to lock up. Nice example though. 

I'll let you know if I figure it out :-)

[dmoo...@googlemail.com]

Forked very minor revision to fix above issue - http://jsfiddle.net/hcL4s/

Now - 

<!-- Create a modal via custom binding -->

<div data-bind="bootstrapModal:modal" data-keyboard="false" data-backdrop="static"></div>