嵌套StimulusJS作用域/控制器问题/HTML5模板标记

Question

我有一个带有嵌套关联的基本Rails应用程序，我正在做一个标准的“行项”类型视图，在这个视图中，我动态地从模板标记中添加和删除行。我有一个select，它触发一个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的一部分，这就是失败的原因。

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

更新2

我找到了一个解决办法--如果有人能改进这段代码，我会接受这是一个更好的答案。

Answer 1

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

我有个解决办法，但很难看。

<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>保存原始<script>和第二个<script>与刺激一起工作。