javascript - Knockout js - && in if condition and containerless binding -


i displaying list of items , if items not available have display default message. now, have check whether object has been created , check object has list in it.

so now, doing below , works creates unnecessary dom elements. but, when same containerless binding doesn't seem work , there && syntax if in ko

<span data-bind="if: object">      <span data-bind="if: !object().property">          <p> list not available </p>     </span>  </span> // works   <!-- ko if: object -->      <!-- ko if: !object().property -->           <p> list not available </p>      <!-- /ko --> <!-- /ko -->  // doesn't work  

thanks

as mentioned codethug, using solutions provided display message until ko.applybindings have finished. more verbose solution, avoid problem without relying on css, use dynamic templates shown in following jsfiddle:

http://jsfiddle.net/sakb4/1/

this create valid markup inside virtual element when ko.applybindings done.

<!-- ko template: { name: dinamyclist } --> <!-- /ko -->  <script type="text/html" id="empty-template">   ... list not available markup ... </script>  <script type="text/html" id="list-template">   ... list available markup ... </script> 

being dinamyclist function returns name of template according verifications want valid list.

edit:

reading thru last comment made me think if behaviour want display "not avaiable template" after calculating list , property false, if thats case, following fiddle fix last 1 provide right condition.

http://jsfiddle.net/sakb4/3/

the "if" condition in template handle moment after knockout ready, before list is. if condition gets messy, advise put inside ko.computed clear markup.

<!-- ko template: { name: dinamyclist, if: object() !== undefined && object().property !== undefined } --> <!-- /ko --> 

Comments

Popular posts from this blog

Perl - how to grep a block of text from a file -

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

javascript - Animating array of divs; only the final element is modified -