Javascript 剑道UI：如何通过删除/添加来交换DOM元素

我有两个模板，一个使用可见和不可见绑定，另一个使用#if（）#

模板1
模板2

#如果（只读）{#
#}否则{#
# } #



var toBind1=$（“#to-bind1”）；
var toBind2=$（“#to-bind2”）；
var vm=剑道。可观察({
数据：[{
只读：对，
瓦尔：“呜！”
}],
});
剑道绑定（toBind1，vm）；
剑道绑定（toBind2，vm）；
setTimeout（函数（）{
console.log（'dfs'）
vm.get（'Data'）[0]。set（'Readonly'，false）；
}, 5000)

5秒钟后，Template2交换到输入框，Template1保持不变

问题是在template2中输入是隐藏的 我想要实现的是用span交换输入，反之亦然，而不是隐藏它

类似于knockoutJS中的if绑定

if（和ifnot）扮演与可见（和隐藏）相似的角色 绑定。不同之处在于，对于visible，包含的标记 始终保留在DOM中，并且始终具有其数据绑定属性 应用可见绑定只是使用CSS来切换容器 元素的可视性。但是，if绑定在物理上增加了或 删除DOM中包含的标记，并仅将绑定应用于 如果表达式为true，则返回子代

这显示了你想要的我认为你想要实现（也许）。它将从初始状态更改为只读，并重新呈现两个项目模板。但要做到这一点，我们必须将对象从数组中取出，并将其重新推送到数组中，以便项目模板再次渲染。然后它将运行JS部分，该部分如下所示：

var$kendoOutput，
$kendoHtmlEncode=kendo.htmlEncode；
与（数据）{
$kendoOutput='\n
\n'；
如果（只读）{
；$kendoOutput+='\n\n'；
}否则{
；$kendoOutput+='\n\n'；
} ;
$kendoOutput+='\n
\n'；
}
返回$kendoOutput；

使用上述代码呈现LI后，将设置绑定。如果绑定到的字段发生更改，则绑定将重新计算。但是更改的内容不会重新呈现模板（即，它不会再次运行上述JS），您必须替换整个项目才能重新运行上面的脚本。

这显示了你想要的我认为你想要实现（也许）。它将从初始状态更改为只读，并重新呈现两个项目模板。但要做到这一点，我们必须将对象从数组中取出，并将其重新推送到数组中，以便项目模板再次渲染。然后它将运行JS部分，该部分如下所示：

var$kendoOutput，
$kendoHtmlEncode=kendo.htmlEncode；
与（数据）{
$kendoOutput='\n
\n'；
如果（只读）{
；$kendoOutput+='\n\n'；
}否则{
；$kendoOutput+='\n\n'；
} ;
$kendoOutput+='\n
\n'；
}
返回$kendoOutput；

---

使用上述代码呈现LI后，将设置绑定。如果绑定到的字段发生更改，则绑定将重新计算。但是，更改的内容不会重新呈现模板（即，它不会再次运行上述JS），您必须替换整个项目才能重新运行上面的脚本。

谢谢@jwvishart.cv您的解决方案工作，我只需要拼接数据并重新插入模板即可重新呈现。谢谢@jwvishart.cv您的解决方案工作，我只需要拼接数据并重新插入模板即可重新渲染。

 <div>Template 1</div>
  <div id="to-bind1" data-bind="source: Data" data-template="template1"></div>

  <div>Template 2</div>
  <div id="to-bind2" data-bind="source: Data" data-template="template2"></div>

  <script id="template1" type="x"> 
    <li>
      # if (Readonly) { #
          <span data-bind="text: Val"></span>
      # } else { #
          <input data-bind="value: Val" />
      # } #
    </li>
  </script>


  <script id="template2" type="x"> 
    <li>
      <span data-bind="visible: Readonly, text: Val"></span>
      <input data-bind="invisible: Readonly, value: Val" />
    </li>
  </script>


  <script>
    var toBind1 = $("#to-bind1");
    var toBind2 = $("#to-bind2");

    var vm = kendo.observable({
      Data: [{
        Readonly: true,
        Val: "Woot!"  
      }],
    });

    kendo.bind(toBind1, vm);
    kendo.bind(toBind2, vm);

    setTimeout(function() {
      console.log('dfs')
      vm.get('Data')[0].set('Readonly', false);
    }, 5000)
  </script>