Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why won't parent/root binding throw an error when property is not defined

Tags:

knockout.js

Why won't the following parent or root bindings cause knockout to crash:

ko.applyBindings({
  child: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko with: child -->
<input type="checkbox" data-bind="checked: $parent.bogus">
<input type="text" data-bind="text: $root.bogus">
<!-- /ko -->

...while this one...

ko.applyBindings({
  child: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="checkbox" data-bind="checked: bogus">

...and this one...

ko.applyBindings({
  child: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" data-bind="text: bogus">

...do correctly crash knockout with error message 'bogus is not defined'?

I would've expected all of them to crash. Is there a reason the $parent/$root bindings shouldn't crash?

like image 903
Philip Bijker Avatar asked Dec 06 '25 06:12

Philip Bijker


1 Answers

If you wrap the bindings inside an anonymous function like the one below, it doesn't crash -

<input type="checkbox" data-bind="checked: function() {bogus}">
<input type="text" data-bind="text: function(){bogus}">

or inside a context switch like below

<!--ko with: child-->
<input type="checkbox" data-bind="checked: $parent.bogus">
<input type="text" data-bind="text: $root.bogus">
<!--/ko-->

However, the moment you immediately call the function in the binding like below, it crashes -

<input type="checkbox" data-bind="checked: function() {bogus}()">
<input type="text" data-bind="text: function(){bogus}()">

or even this -

<input type="checkbox" data-bind="checked: $parent.bogus">
<input type="text" data-bind="text: $root.bogus">

So, with this it appears to me as if when wrapping the bindings around with a context switch like with (or may be using), the binding evaluation is deferred somehow to some point later. While if not, the binding is evaluated at the time of DOM creation at the time of which bogus remains undefined.

like image 151
gkb Avatar answered Dec 10 '25 12:12

gkb



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!