时间戳

首页 > 解决方案 > 嵌套的 StimulusJS 范围/控制器问题/HTML 5 模板标签

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

问题描述

我有一个带有嵌套关联的基本 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目标都会更新，除了模板内的目标。就好像它在控制器的整个范围内都丢失了。我之前将它们嵌套，但现在将它们放在同一个 divdata-controller="expenditure nested-form"中进行仔细检查，它仍然无法正常工作。检查拼写，甚至尝试删除data-target="nested-form.template". 浏览器控制台中没有错误。我在这里遗漏了一些明显的东西吗？

更新

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

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

更新 2

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

标签： javascripthtmlruby-on-railsstimulusjs

解决方案

<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>包含原始 HTML，第二个<script>与 Stimulus 一起使用。

推荐阅读