Skip to content

Instantly share code, notes, and snippets.

@groeneman
Last active December 19, 2015 12:29
Show Gist options
  • Save groeneman/5955126 to your computer and use it in GitHub Desktop.
Save groeneman/5955126 to your computer and use it in GitHub Desktop.
Inconsistency in Knockout's data-bind precedence
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js'></script>
<script type="text/javascript">
function viewModel() {
var self=this;
this.someText = ko.observable('I am a string');
this.observableBoolean = ko.observable(false);
};
</script>
</head>
<body>
Text first, then if:<span data-bind="text:someText,if:observableBoolean"></span><br />
If first, then text:<span data-bind="if:observableBoolean,text:someText"></span><br /><br />
Text first, then visible:<span data-bind="text:someText,visible:observableBoolean"></span><br />
Visible first, then text:<span data-bind="visible:observableBoolean,text:someText"></span>
</body>
<script type="text/javascript">
ko.applyBindings(new viewModel());
</script>
</html>
@groeneman
Copy link
Author

This is the output that results:

Text first, then if:
If first, then text:I am a string

Text first, then visible:
Visible first, then text:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment