Knockout: add textpath only if checkbox is checked

Question

I am playing with SVG. I have a checkbox. If it is checked, I want a text path to be used with a text on it. If the checkbox is not checked, I want just the text displayed without text path.

The problem is that if there should be a textpath the data-bind attribute should be on the text element:

<text font-size="46" fill="red" font-family="Verdana" data-bind="text: customTextValue">

</text>

While in the other case:

  <text font-size="46" fill="red" font-family="Verdana">

         <textPath xlink:href="#wavyPath1" data-bind="text: customTextValue">
         </textPath>
     </text>

HTML:

<svg id="resultArea" xmlns="http://www.w3.org/2000/svg">

     <path id="wavyPath1"
     fill="none" stroke="green" stroke-width="5"
     d="M 50 250
        C 150 150 250 50 350 150
        C 450 250 550 350 650 250
        C 750 150 850 150 850 150" />

     <text font-size="46" fill="red" font-family="Verdana"> 
         <textPath xlink:href="#wavyPath1" data-bind="text: customTextValue">>
         </textPath>
     </text>
</svg>

Javascript:

var MyViewModel = function() {
  this.customTextValue = ko.observable('test');
  this.useTextPath = ko.observable(false);

}

ko.applyBindings(new MyViewModel());

JsFiddle: http://jsfiddle.net/2Qnv7/128/

What can be done here?

Wojciech Czerniak Wojciech Czerniak · Accepted Answer · 2013-12-17T14:24:02

The binding for checkbox is checked, not value. First line should be:

<input type="checkbox" data-bind="checked: useTextPath">

Use virtual element if. Virtual elements don't add DOM and if will remove from DOM everything between its virtual tags when false.

<!-- ko if: useTextPath-->
  <text font-size="46" fill="red" font-family="Verdana">
    <textPath xlink:href="#wavyPath1" data-bind="text: customTextValue">
    </textPath>
  </text>
<!-- /ko -->
<!-- ko if: !useTextPath()-->
  <text font-size="46" fill="red" font-family="Verdana" 
   data-bind="text: customTextValue" x="250" y="150">
  </text>
<!-- /ko -->

JsFiddle: http://jsfiddle.net/2Qnv7/129/

Knockout: add textpath only if checkbox is checked

1 Answers