Пользовательский интерфейс Kendo: Как поменять элементы DOM, удалив / добавив

Question

https://jsbin.com/jigefipiye/edit?html, консоль, выход

У меня есть 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 и наоборот

что-то похожее на привязку if в нокауте JS https://knockoutjs.com/documentation/if-binding.html

if ( и если нет) играют роль, аналогичную видимым (и скрытым) привязкам. Разница в том, что при использовании visible видимая разметка всегда остается в DOM и к ней всегда применяются свои атрибуты привязки данных - видимая привязка просто использует CSS, чтобы переключать видимость элемента контейнера. Однако привязка if физически добавляет или удаляет содержащуюся разметку в DOM и применяет привязки к потомкам только в том случае, если выражение истинно.

Answer 1

https://jsbin.com/lavunidapo/edit?html, консоль, вывод

Это показывает, чего вы хотите, я думаю, вы хотите достичь (возможно). Он изменяется только для чтения из исходного состояния и повторно отображает оба шаблона элементов. Но для этого мы должны вынуть объект из массива и повторно поместить sh в массив, чтобы шаблон элемента снова визуализировался. Затем он запустит часть 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 снова), вам нужно заменить весь элемент, чтобы повторный запуск приведенного выше сценария.