javascript - This template engine does not support the 'if' binding within its templates -
in code below error happens in template when added 'if' bind
is fixable want bind when 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" /> 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" /> 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>
the if binding needs placed on container. controls binding/rendering of children.
you want like:
<div data-bind="if: isontwitter"> <input data-bind="value: twittername" /> </div> or
<!-- ko if: isontwitter --> <input data-bind="value: twittername" /> <!-- /ko -->
Comments
Post a Comment