Show twitter bootstrap modal dialog automatically with knockout

Show twitter bootstrap modal dialog automatically with knockout

Asked on December 13, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

        Create a KO binding handler method is good for this , I called it showModal :

    ko.bindingHandlers.showModal = {
        init: function (element, valueAccessor) {},
        update: function (element, valueAccessor) {
            var value = valueAccessor();
            if (ko.utils.unwrapObservable(value)) {
                $(element).modal('show');
                // this is to focus input field inside dialog
                $("input", element).focus();
            }
            else {
                $(element).modal('hide');
            }
        }
    };
    

    Usage :

    <div class="modal hide fade" data-bind="showModal:selectedItem, with:selectedItem">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 data-bind="text:name"></h3>
      </div>
      <div class="modal-body">
        <form data-bind="submit:deselectItem">
          <!-- editor for item here -->
        </form>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn" data-bind="click:deselectItem">Close</a>
      </div>
    </div>
    
    Answered on December 13, 2018.
    Add Comment

        The drawback is that html will not working properly in Bootstrap 3+.

        The “hide” class is now enabled by default, and having it as class on modal div , will result in the div not showing. See http://www.bootply.com/bootstrap-3-migration-guide

        This works:

    <div class="modal fade" data-bind="showModal:selectedItem, with:selectedItem">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3 data-bind="text:TextItem"></h3>
                </div>
                <div class="modal-body">
                    <form data-bind="submit:$root.accept">
                        <!-- editor for item here -->
                        <div class="form-group">
                            <label>Text</label>
                            <input type="text" class="form-control" data-bind="value: TextItem" placeholder="Text">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Luk</button>
                    <button class="btn" data-bind="click:$root.accept">Gem</button>
                </div>
            </div>
        </div>
    </div>
    

        In this example click:$root.functionName will call a function in the ViewModel.

    Answered on December 13, 2018.
    Add Comment

        Use the following method for simplification :

    <form class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem, submit:deselectItem">
        ...
    </form>
    

        That way, Form will get back in the submit handler and can properly close it there:

    deselectItem = function(form){
        ...
        $(form).modal('hide');
    }
    

     

    Answered on December 13, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.