Kendo UI：如何通过删除/添加交换 DOM 元素

Question

https://jsbin.com/jigefipiye/edit?html,console,output

我有 2 个模板，一个使用可见和不可见绑定，一个使用 # if () #

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

5 秒后 Template2 切换到输入框，而 Template1 保持不变

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

类似于 knockoutJS https://knockoutjs.com/documentation/if-binding.html 中的 if 绑定的东西

if（和 ifnot）与可见（和隐藏）的作用相似 绑定。不同之处在于，在可见的情况下，包含的标记 始终保留在 DOM 中并始终具有其数据绑定属性 已应用——可见绑定仅使用 CSS 来切换容器 元素的可见性。然而，if 绑定在物理上添加或 删除 DOM 中包含的标记，并且仅将绑定应用于 如果表达式为真，则为后代。

Answer 1

https://jsbin.com/lavunidapo/edit?html,console,output

这显示了我认为你想要实现的目标（也许）。它从初始状态更改 Readonly 并重新呈现两个项目模板。但要做到这一点，我们必须将对象从数组中取出并将其重新推入数组，以便项目模板再次重新呈现。然后它将运行看起来像这样的 JS 部分：

var $kendoOutput, 
    $kendoHtmlEncode = kendo.htmlEncode;
with(data) { 
    $kendoOutput=' \n <li>\n '; 
    if (Readonly) {
        ;$kendoOutput+='\n <span data-bind="text: Val"></span>\n '; 
    } else { 
        ;$kendoOutput+='\n <input data-bind="value: Val" />\n ';
    } ;
    $kendoOutput+='\n </li>\n ';
}
return $kendoOutput;

使用上述代码渲染 LI 后，绑定就设置好了。绑定将重新评估绑定到的字段是否更改。但是改变的东西不会重新渲染模板（即它不会再次运行上面的 JS）你必须替换整个项目才能让上面的脚本重新运行。