Bootstrap modal does not work with knockout multiple bindings

Question

When I have one knockout binding, bootstrap modal works fine. But it does not work with multiple knockout bindings. Sample code is:

<div id="vm1">
    <button data-toggle="modal" data-target="#report">click kro</button>

    <div class="modal inmodal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated ">

                <div class="modal-body">
                    This is body
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">cancel</button>
                    <button type="button" data-bind="click: function(){ return report()}" class="btn btn-primary">Submit</button>
                </div>
            </div>

        </div>
    </div>
</div>
<div id="vm2">
    <div data-bind="text:sample"></div>
</div>

Js code is:

function VM1() {
            var self = this;
            self.report = function () {
                alert("done");
            }
        }
        function VM2() {
            var self = this;
            self.sample = "irfan watoo";
        }
        $(function () {
            ko.applyBindings(new VM1, document.getElementById('vm1'));
            ko.applyBindings(new VM2, document.getElementById('vm2'));

        });

what could be the reason? why its not working with multiple ko bindings?

in applyBindings it should be `new VM1()` (creating instance) correct it and let us know — super cool, Oct 06 '15 at 14:43
even if i remove report function in js it does not show error in console — Irfan Y, Oct 06 '15 at 14:48
working here: http://jsfiddle.net/LL69ww6t/ just no alert() since iframes block them by default — dfperry, Oct 06 '15 at 14:49
`even if i remove report function` that is because you are having function syntax `function(){ return report()}` (onLoad it wont check) later when you try clicking it will throw error else if your try `click:report` it will throw error onLoad — super cool, Oct 06 '15 at 14:55
I changed `click:function(){ return report()}` to `click:report` but still does not show error on load. It show error when I use single single ko binding — Irfan Y, Oct 06 '15 at 14:59
@dperry in your fiddle you have not included knockout file. Why your code is working without knockout.js — Irfan Y, Oct 06 '15 at 15:09
check this scenario http://jsfiddle.net/LkqTU/27136/ . if nothing is declared in vm and when accessing at `click` it will throw error . i renamed clicked may be it may cached in my sys . but why you are looking for getting error — super cool, Oct 06 '15 at 15:10
because when I didn't get error it means something wrong with the binding. I must get error where I am supposed to get it. and I got error in single ko binding but didn't get in multiple binding. — Irfan Y, Oct 06 '15 at 15:17
here http://jsfiddle.net/LkqTU/27139/ single binding also not throwing any error . thee is nothing wrong with 'n' no of bindings until you have different DOM for 2nd parameter . — super cool, Oct 06 '15 at 15:25
I have mentioned in above comment: `I changed click:function(){ return report()} to click:report`. yeah there should not be anything wrong with n no. of bindings but there is something wrong with mine. I just created new cshtml file with tried over there but same issue. — Irfan Y, Oct 06 '15 at 15:31
@IrfanWattoo I used knockout as the main JS framework in the fiddle, so I didn't need to include it as an external resource — dfperry, Oct 06 '15 at 15:33
is that working when you change click binding name? it works for me tough `report` is screwing lol — super cool, Oct 06 '15 at 15:40
it's working ? or not . for me other than `report` it seems to work as expected — super cool, Oct 06 '15 at 15:53
check this fiddle: jsfiddle.net/LL69ww6t/1 I've updated the report button to just update a new observable value that is on the viewmodel (message) clicking the button updates the value just fine — dfperry, Oct 06 '15 at 15:54
@supercool its working with `report` only on SINGLE ko binding. — Irfan Y, Oct 06 '15 at 15:58
@dperry he is looking to get error when `self.report` is removed from viewModel . see there is no error here http://jsfiddle.net/LL69ww6t/4/ . — super cool, Oct 06 '15 at 15:59
@supercool I'm getting an error: Uncaught TypeError: h.apply is not a function — dfperry, Oct 06 '15 at 16:00
yeah I got error on click `handler.apply is not a funciton` when I use syntax like `click:function(){return report() }` but only in SINGLE ko binding — Irfan Y, Oct 06 '15 at 16:03
@dperry yes it will . precisely he is expecting the error onLoad not on click .As view will check for all bindings(onLoad) when `report` is not defined it should throw error `report is undefined` but its not the case — super cool, Oct 06 '15 at 16:05
@dperry try modifying click binding name other than `report` it gives error but not with `report` (sometimes ko is crazy) here http://jsfiddle.net/LL69ww6t/8/ — super cool, Oct 06 '15 at 16:15
@supercool There is a `report` defined on the global object, specifically, the div with the id `report`. — Roy J, Oct 06 '15 at 17:40
@RoyJ spot on with your observation but how come an `id` of div is a `object` which internally used by ko . any docs on it is appreciated or any explanation on id as `global object` is great ! — super cool, Oct 07 '15 at 06:46
@supercool About `id`s and the global object: http://stackoverflow.com/questions/6381425/is-there-a-spec-that-the-id-of-elements-should-be-made-global-variable Knockout translates bound code into functions that return that code, referring to members of the viewmodel (magically), but if there's no such member in the viewmodel, global variables will be seen. — Roy J, Oct 07 '15 at 11:47

score 0 · Answer 1 · answered Oct 06 '15 at 17:49

All I had to do was put the parens on the constructor calls, as some commenters noted. report can be attached by name, rather than wrapped in a function. It works either way, but simpler is better.

function VM1() {
  var self = this;
  self.report = function() {
    alert("done");
  };
}

function VM2() {
  var self = this;
  self.sample = "irfan watoo";
}
$(function() {
  ko.applyBindings(new VM1(), document.getElementById('vm1'));
  ko.applyBindings(new VM2(), document.getElementById('vm2'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="vm1">
  <button data-toggle="modal" data-target="#report">click kro</button>
  <div class="modal inmodal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content animated ">
        <div class="modal-body">This is body</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-white" data-dismiss="modal">cancel</button>
          <button type="button" data-bind="click: report" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="vm2">
  <div data-bind="text:sample"></div>
</div>

Bootstrap modal does not work with knockout multiple bindings

1 Answers1