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 中輸入被隱藏我想要實現的是用跨度交換輸入，反之亦然而不是隱藏它

類似於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）你必須替換整個項目才能讓上面的腳本重新運行。