嵌套的 StimulusJS 范围/控制器问题/HTML 5 模板标签

Question

我有一个带有嵌套关联的基本 Rails 应用程序，我正在做一个标准的“行项目”类型视图，我在其中动态添加和删除模板标记中的行。我有一个触发 AJAX 调用以替换所有嵌套行选择的选择（上下文已更改）。支出控制器处理整个表单，嵌套表单控制器用于其他页面处理行的添加和删除：

<div data-controller="expenditure nested-form">

  <select data-target="expenditure.budget" data-action="change->expenditure#update_related"></select>

  <table>
    <thead></thead>
    <tbody>
      inserted rows... 
      <tr>
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>

    <template data-target="nested-form.template">
      <tr data-new_record="true">
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>
    </template>

    </tbody>
  </table>  

</div>

它工作正常。我可以添加和删除行，如果我更改expenditure.budget，则选择所有expenditure.budgetItemSelect 目标都会更新，除了模板内的目标。就好像它在控制器的整个范围内都丢失了。我之前将它们嵌套，但现在将它们放在同一个 div data-controller="expenditure nested-form" 中进行仔细检查，但它仍然无法正常工作。检查拼写，甚至尝试删除data-target="nested-form.template"。浏览器控制台中没有错误。我在这里遗漏了什么明显的东西吗？

更新

嗯...似乎template 标签是只读的，而不是 DOM 的一部分，这就是失败的原因。

我管理了一个 hack，我替换了整个模板的内容，但这似乎破坏了添加/删除行的控制器 ????‍♂️。

更新 2

我找到了一种解决方法 - 如果有人可以改进此代码，我将接受此作为更好的答案。

Answer 1

这似乎是 HTML5 中的 <template> 标记的问题。

我有一个解决方法，但它很难看。

<div data-controller="expenditure nested-form">

  <select data-target="expenditure.budget" data-action="change->expenditure#update_related"></select>

  <table>
    <thead></thead>
    <tbody>
      inserted rows... 
      <tr>
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>

    <template id="expenditure_items_template">
      <tr data-new_record="true">
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>
    </template>
    <script type="text/template" data-target="nested-form.template" id="expenditure_items_template_script">
    </script>

    </tbody>
  </table>  

</div>

这是我在控制器中所做的：

// find the template
var template = document.getElementById("expenditure_items_template");

// load the template contents
var new_template = document.importNode(template.content, true);

// replace the select with my new content (off screen)

new_template.getElementById('expenditure_expenditure_items_attributes_NEW_RECORD_budget_item_id').innerHTML = select.innerHTML;

// 清除新的脚本占位符 document.getElementById("expenditure_items_template_script").innerHTML = "";

// 将新更新的模板设置到脚本标签中 document.getElementById("expenditure_items_template_script").appendChild(new_template);

我基本上有两个模板 - 一个 <template> 保存原始 HTML，第二个 <script> 与 Stimulus 一起使用。