0

有几个库是 Rails 7 下测试的重点（例如 zxing、flatpickr）。但是为了建立一个操作程序，有几个问题需要明确。

importmap 路由是首选路由。
但是，文档似乎（仅？）指向固定过程，有两个选项：选择 cdn 和在--download本地提供版本的选项。但是，如果一个人已经有一个 js 文件可以使用 - 可以将它集成到流程中吗？

同样，应该如何处理内联 javascript - 作为一个过程，我发现最好先从内联块开始，然后再将它们移动到控制器（如果有必要的话）。这可以实现吗？是否需要任何声明？

内联使用的示例脚本（当然是 jquery 语法），其中“定制”部分是与其相关的部分formData，可能仅在一页或两页上调用。

<script>
window.addEventListener('turbo:load', function () {
  let selectedDeviceId;
  const codeReader = new ZXing.BrowserMultiFormatReader()
  console.log('ZXing code reader initialized')
  codeReader.getVideoInputDevices()
    .then((videoInputDevices) => {
      const sourceSelect = document.getElementById('sourceSelect')
      selectedDeviceId = videoInputDevices[0].deviceId
      if (videoInputDevices.length >= 1) {
        videoInputDevices.forEach((element) => {
          const sourceOption = document.createElement('option')
          sourceOption.text = element.label
          sourceOption.value = element.deviceId
          sourceSelect.appendChild(sourceOption)
        })

        sourceSelect.onchange = () => {
          selectedDeviceId = sourceSelect.value;
        };

        const sourceSelectPanel = document.getElementById('sourceSelectPanel')
        sourceSelectPanel.style.display = 'block'
      }

      document.getElementById('startButton').addEventListener('click', () => {
        codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
          if (result) {
            console.log(result)
            document.getElementById('result').textContent = result.text
let formData = new FormData();
let CodeParams = {
  code_data: result.text
};
formData.append("code_json_data", JSON.stringify(CodeParams));
$.ajax({
  url: "barcode_section_update",
  type: "post",
  data: formData,
  processData: false,
  contentType: false
  });
          }
          if (err && !(err instanceof ZXing.NotFoundException)) {
            console.error(err)
            document.getElementById('result').textContent = err
          }
        })
        console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
      })

      document.getElementById('resetButton').addEventListener('click', () => {
        codeReader.reset()
        document.getElementById('result').textContent = '';
        console.log('Reset.')
      })

    })
    .catch((err) => {
      console.error(err)
    })
})

</script>
4

0 回答 0