CODEWITHSUNDEEP
knockout.js
kombat
kombat

Reputation: 343

Containerless control flow not working

Any ideas why this doesn't work for me? I'm using knockout 2.3.

<!-- ko if: vendorName() -->
  <div>
    <label for="vendorName" class="form-label bold">Name:</label>
    <input name="vendorName" id="vendorName" type="text" class="" style="">
  </div>
<!-- /ko -->

Here's the view-model

function SearchFieldViewModel() {
    var self = this;
    self.vendorName = ko.observable(false)
};

I've tried adding $root and $parent. I've tried vendorName(), and just vendorName. Nothing works. If I use standard data-binding on the div, that works just fine. I just can't get the containerless syntax to work, which I would prefer to use since I would like the div to be gone, not just what's inside the div.

Upvotes: 1

Views: 429

Answers (2)

kombat
kombat

Reputation: 343

As Patrick Steele suggested, the comments were being stripped out. But not by the browser, but by JSF. Using this worked:

<h:outputText value="&lt;!--" escape="false" /> ko if: vendorName <h:outputText value="--&gt;" escape="false" />
....
....
<h:outputText value="&lt;!--" escape="false" /> /ko <h:outputText value="--&gt;" escape="false" />

Upvotes: 2

ScottGuymer
ScottGuymer

Reputation: 1905

It seems like the suggestions in the above comments would fix this for you

<!-- ko if: vendorName -->
  <div>
    <label for="vendorName" class="form-label bold">Name:</label>
    <input type="text" name="vendorName" id="vendorName" data-bind="Name"/>
  </div>
<!-- /ko -->


function SearchFieldViewModel() {
    var self = this;
    self.vendorName = ko.observable(false);    
};

ko.applyBindings(new SearchFieldViewModel());

JSFiddle: http://jsfiddle.net/Pe9Kz/

Upvotes: 1

Related Questions