如何使Rails JS视图干燥？

Question

我有此图像标签

      <div id="google_icon_div">
        <%= image_tag "google-icon.png", id: "google_icon", onclick: "test_transl(#{passed_resource}, #{passed_locales.to_json}, #{primary_resource})", remote: true%>
      </div>

，并且具有此JS函数，

<script>
  function test_transl(resource_value, locales_arr, primary_resource){
      var primary_text;
      if (primary_resource.getElementsByClassName('Polaris-TextField__Input')[0] == null) {
          primary_text = primary_resource.getElementsByClassName('note-editable')[0].innerText
      } else {
          primary_text = primary_resource.getElementsByClassName('Polaris-TextField__Input')[0].value
      }
      locales_arr = locales_arr.map(i => i.replaceAll('-','_'));
      var locales_resource_arr = locales_arr.map(i => resource_value + '_' + i);

     $.ajax({
          type: "GET",
          headers: {
             "Authorization": "Bearer " + window.sessionToken
          },
          url: "/api/translations/translate_string",
          dataType: "json",
          data: {primary_value: primary_text, short_locales_arr: locales_arr},
          success: function(result){
              for (var i=0; i<locales_arr.length; i++)
              {
                  my_div = document.getElementById(locales_resource_arr[i])
                  if (my_div.getElementsByClassName('Polaris-TextField__Input')[0] == null) {
                      my_div.getElementsByTagName('textarea')[0].value = result[i]
                      my_div.getElementsByClassName('note-editable')[0].innerText = result[i]
                      my_div.getElementsByClassName('note-placeholder')[0].innerText = ''
                  }
                  else {
                      my_div.getElementsByClassName('Polaris-TextField__Input')[0].value = result[i].replace(/['"]+/g, '')
                  }
              }
           },
         error: function (result){
              console.log(result, this.error)
         }
      })
  }
</script>

我在其他几个视图页面上具有相同的代码，并且差异很小。有什么办法可以使我的代码干燥？如何制作单个JS功能并能够通过OnClick将不同的对象解析到其上，而不能在不同的html.erb页面上重复相同的JS代码？

Answer 1

您不清楚要解析的“不同对象”，因此我只是猜想您需要找到不同的DOM类 /元素。

确保您的JS未嵌入ERB中，它应该在您的JS目录中自己的文件中。然后在ERB中添加DOM元素名称中的js可以获取的隐藏元素名称。喜欢：

<span id="parseObject" style="display: none">Polaris-TextField__Input</span>

然后在您的JS中进行其他电话，获取名称字段。

const value = document.getElementById('parseObject').value;

然后您的脚本看起来像

<script>
  function test_transl(resource_value, locales_arr, primary_resource){
      const parseObjectName = document.getElementById('parseObject').value;
      var primary_text;
      if (primary_resource.getElementsByClassName(parseObjectName)[0] == null) {
          primary_text = primary_resource.getElementsByClassName('note-editable')[0].innerText
      } else {
          primary_text = primary_resource.getElementsByClassName(parseObjectName)[0].value
      }
      locales_arr = locales_arr.map(i => i.replaceAll('-','_'));
      var locales_resource_arr = locales_arr.map(i => resource_value + '_' + i);

     $.ajax({
          type: "GET",
          headers: {
             "Authorization": "Bearer " + window.sessionToken
          },
          url: "/api/translations/translate_string",
          dataType: "json",
          data: {primary_value: primary_text, short_locales_arr: locales_arr},
          success: function(result){
              for (var i=0; i<locales_arr.length; i++)
              {
                  my_div = document.getElementById(locales_resource_arr[i])
                  if (my_div.getElementsByClassName(parseObjectName)[0] == null) {
                      my_div.getElementsByTagName('textarea')[0].value = result[i]
                      my_div.getElementsByClassName('note-editable')[0].innerText = result[i]
                      my_div.getElementsByClassName('note-placeholder')[0].innerText = ''
                  }
                  else {
                      my_div.getElementsByClassName(parseObjectName)[0].value = result[i].replace(/['"]+/g, '')
                  }
              }
           },
         error: function (result){
              console.log(result, this.error)
         }
      })
  }
</script>

或类似的东西