Menu
In the code below the error happens in this template when I added the 'if' to the bind
Is this fixable as I only want it to bind when its visible?
Thanks
<script id="friendsTemplate" type="text/html">
<li>
<input data-bind="value : name" />
<button data-bind="click: remove">Remove</button>
<label><input type="checkbox" data-bind="checked : isOnTwitter" /> is on twitter</label>
<input data-bind="if:isOnTwitter, value:twitterName" />
</li>
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%-- <script src="Scripts/knockout-2.2.1.js"></script>--%>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.js"></script>
<script src="Scripts/knockout-2.2.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>details</h1>
<p>first name: <input data-bind="value: firstName" /></p>
<p>last name: <input data-bind="value: lastName" /></p>
<p>full name: <span data-bind ="text: fullName"></span></p>
<h2>friends</h2>
<ul data-bind="template: {name:'friendsTemplate',foreach:friends}"></ul>
<script id="friendsTemplate" type="text/html">
<li>
<input data-bind="value : name" />
<button data-bind="click: remove">Remove</button>
<label><input type="checkbox" data-bind="checked : isOnTwitter" /> is on twitter</label>
<%-- <input data-bind="value:twitterName,visible: isOnTwitter" />--%>
<input data-bind="if:isOnTwitter, value:twitterName" />
</li>
</script>
<button data-bind="click: addFriend">add friend</button>
</div>
</form>
</body>
</html>
<script type ="text/javascript">
function friend(name) {
return {
name: ko.observable(name),
isOnTwitter: ko.observable(false),
twitterName: ko.observable(),
remove: function () {
viewModel.friends.remove(this);
}
};
}
var viewModel ={
firstName: ko.observable("bert"),
lastName: ko.observable("smith"),
friends: ko.observableArray([new friend('steve'), new friend('annie')]),
addFriend: function () {
this.friends.push(new friend('bob'));
}
};
viewModel.fullName = ko.dependentObservable(function () {
return this.firstName() + " " + this.lastName();
},viewModel);
ko.applyBindings(viewModel);
</script>
498
The if binding needs to be placed on a container. It only controls the binding/rendering of its children.
You would want to do something like:
<div data-bind="if: isOnTwitter">
<input data-bind="value: twitterName" />
</div>
or
<!-- ko if: isOnTwitter -->
<input data-bind="value: twitterName" />
<!-- /ko -->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
