淘汰赛：仅在选中复选框时添加文本路径答案

【问题标题】：Knockout: add textpath only if checkbox is checked淘汰赛：仅在选中复选框时添加文本路径
【发布时间】：2014-01-05 07:46:12
【问题描述】：

我正在玩 SVG。我有一个复选框。如果选中，我想要一个文本路径与文本一起使用。如果未选中该复选框，我只想显示没有文本路径的文本。

问题是如果应该有一个文本路径数据绑定属性应该在text元素上：

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

</text>

而在其他情况下：

  <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/

这里可以做什么？

【问题讨论】：

标签： knockout.js svg

【解决方案1】：

复选框的绑定是checked，而不是value。第一行应该是：

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

使用虚拟元素if。虚拟元素不添加 DOM，if 会在为 false 时从 DOM 中删除其虚拟标签之间的所有内容。

<!-- 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/

【讨论】：