如何在Backbone.js视图中不使用jQuery获取表单JSON数据

当然可以！完全不用依赖jQuery就能实现这个需求，毕竟Backbone本身就搭配了Underscore，我们可以结合原生JavaScript和Underscore来轻松提取表单数据，尤其是只保留复选框勾选状态对应的内容。

1. 通用表单数据提取（适用于常规表单） #

如果你的表单是常规的输入控件组合，比如文本框、单选框、复选框等，可以在Backbone视图里写一个方法，通过原生DOM选择器定位元素，再结合Underscore遍历处理：

var DynamicFormView = Backbone.View.extend({
  el: '#your-form-wrapper', // 视图对应的容器

  events: {
    'submit #dynamic-form': 'onFormSubmit'
  },

  onFormSubmit: function(e) {
    e.preventDefault();
    // 提取表单数据
    var formData = this.extractFormData();
    console.log('提取的JSON数据：', formData);
    // 这里可以继续处理数据，比如发送到后端
  },

  extractFormData: function() {
    const formData = {};
    // 获取视图内所有带name属性的表单元素
    const formElements = this.el.querySelectorAll('[name]');

    _.each(formElements, el => {
      const fieldName = el.name;
      const fieldType = el.type;

      // 处理复选框：只保留勾选的项
      if (fieldType === 'checkbox') {
        if (!el.checked) return;
        // 处理同name的多个复选框，用数组存储
        if (formData[fieldName]) {
          formData[fieldName] = Array.isArray(formData[fieldName]) 
            ? [...formData[fieldName], el.value] 
            : [formData[fieldName], el.value];
        } else {
          formData[fieldName] = el.value;
        }
        return;
      }

      // 处理单选框：只保留选中的项
      if (fieldType === 'radio') {
        if (el.checked) formData[fieldName] = el.value;
        return;
      }

      // 处理下拉框、文本框等常规控件
      formData[fieldName] = el.type === 'select-one' 
        ? el.value 
        : el.value.trim();
    });

    return formData;
  }
});

2. 表格内复选框数据提取（匹配你的场景） #

看你提到的表格结构，应该是每行对应一个数据项，勾选复选框后要提取该行的相关字段。这种情况可以通过定位勾选的复选框，再提取对应行的数据：

假设你的表格行结构是这样的（动态渲染）：

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>{{labels.selectImage}}</th>
      <th>{{labels.nameVisibleToShop}}</th>
      <th>{{labels.sourceCode}}</th>
      <th>{{labels.pricePerItem}}</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态生成的行，用data属性存储数据更方便 -->
    <tr>
      <td><input type="checkbox" class="item-checkbox" data-item='{"id":1,"name":"测试商品","sourceCode":"SC001","price":9.99}'></td>
      <td><img src="item1.jpg" alt="测试商品"></td>
      <td>测试商品</td>
      <td>SC001</td>
      <td>9.99</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

对应的视图方法可以这样写：

var TableFormView = Backbone.View.extend({
  el: '#table-container',

  // 比如点击某个按钮触发数据提取
  events: {
    'click #submit-selected': 'getSelectedItems'
  },

  getSelectedItems: function() {
    const selectedItems = [];
    // 获取所有勾选的复选框
    const checkedBoxes = this.el.querySelectorAll('.item-checkbox:checked');

    _.each(checkedBoxes, box => {
      // 直接从data属性解析JSON数据，不用遍历DOM
      const itemData = JSON.parse(box.dataset.item);
      selectedItems.push(itemData);

      // 如果不想用data属性，也可以通过父行获取单元格内容：
      // const row = box.closest('tr');
      // selectedItems.push({
      //   name: row.querySelector('td:nth-child(3)').textContent.trim(),
      //   sourceCode: row.querySelector('td:nth-child(4)').textContent.trim(),
      //   pricePerItem: parseFloat(row.querySelector('td:nth-child(5)').textContent.trim())
      // });
    });

    console.log('选中的商品数据：', selectedItems);
    return selectedItems;
  }
});

核心思路 #

本质上就是用原生JS的querySelectorAll来定位视图内的表单元素，再用Underscore的_.each遍历处理，完全不需要jQuery。对于复选框，只过滤checked状态为true的元素，就能精准获取你需要的数据。

内容的提问来源于stack exchange，提问作者Ajay Thakur