嵌套的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"。浏览器控制台中没有错误。我在这里错过明显的东西吗？

UPDATE

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

[我管理了一个黑客，在其中替换了整个模板的内容，但这似乎破坏了添加/删除行🤦‍♂️的控制器。

UPDATE 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>用于刺激。