toJSON with jQuery object as observable

by spring1975

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<button class="withoutMenu">clear menu and call toJSON</button>
<button class="withMenu">call toJSON with menu intact</button>
<section>
    <button data-bind="click: toggleMenu">Toggle menu</button>
    <ul id="menu" data-bind="popupMenu: $data">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
</section

JavaScript

var viewModel = { 
    menu: ko.observable(),
    menuVisible: ko.observable(false),
    toggleMenu: function() {
        this.menuVisible(!this.menuVisible());
    }
}

ko.bindingHandlers.popupMenu = {
        init: function(element, valueAccessor) {
            var valAccessor = valueAccessor(),
                shouldBeOpen = ko.unwrap(valAccessor.menuVisible),
                menu = valAccessor.menu;

            menu($(element));
            var m = menu().menu();

            shouldBeOpen ? $(m).show() : $(m).hide();
        },
        update: function (element, valueAccessor, allBindingsAccessor) {
            var valAccessor = valueAccessor(),
                shouldBeOpen = ko.unwrap(valAccessor.menuVisible),
                menu = ko.unwrap(valAccessor.menu);
            shouldBeOpen ? $(menu).show() : $(menu).hide();
        }
    };

    ko.applyBindings(viewModel);
$('.withMenu').click(function(){
    ko.toJSON(viewModel);
});
$('.withoutMenu').click(function(){
    viewModel.menu('');
    ko.toJSON(viewModel);
});