如何在Backbone中为动态生成的多个输入框绑定按键事件监听器？

嘿，我来帮你搞定用Backbone实现这个带字数限制的输入功能～ 看你说用户数据是数组形式，咱们可以从模型、视图、模板这几块一步步来，完美实现每个输入框的输入捕获和字数统计：

首先咱们得给每个用户的输入数据建个模型，用来存用户名、输入内容和字数上限，还加个计算剩余字数的方法：

var UserInputModel = Backbone.Model.extend({
  defaults: {
    userName: '',
    inputContent: '',
    maxLength: 100 // 这里可以根据需求调整默认字数上限
  },
  // 计算剩余可输入字数
  getRemainingChars: function() {
    return this.get('maxLength') - this.get('inputContent').length;
  }
});

既然用户数据是数组，用Backbone的Collection来统一管理会更方便：

var UserInputCollection = Backbone.Collection.extend({
  model: UserInputModel
});

这个视图负责渲染单个用户的输入框、显示剩余字数，还会监听输入事件实时更新数据。每个输入项对应一个模型，互相独立：

var UserInputItemView = Backbone.View.extend({
  tagName: 'div',
  className: 'user-input-item', // 可以加CSS类来匹配截图样式
  // Underscore模板，和截图布局对应
  template: _.template(`
    <div class="user-label"><%= userName %></div>
    <textarea 
      class="content-input" 
      maxlength="<%= maxLength %>"
      placeholder="请输入内容..."
    ><%= inputContent %></textarea>
    <div class="char-counter">剩余字数: <%= remainingChars %></div>
  `),
  // 监听输入框的输入事件
  events: {
    'input .content-input': 'updateInputContent'
  },
  initialize: function() {
    // 模型数据变化时自动重新渲染
    this.listenTo(this.model, 'change', this.render);
  },
  // 更新模型里的输入内容
  updateInputContent: function(e) {
    const inputVal = e.target.value;
    this.model.set('inputContent', inputVal);
  },
  // 渲染视图，把剩余字数也传入模板
  render: function() {
    const templateData = {
      ...this.model.toJSON(),
      remainingChars: this.model.getRemainingChars()
    };
    this.$el.html(this.template(templateData));
    return this;
  }
});

主视图负责把整个用户集合渲染到页面的容器里：

var UserInputMainView = Backbone.View.extend({
  el: '#user-input-container', // 页面上的容器元素ID，需要提前在HTML里定义
  initialize: function(usersData) {
    // 用传入的用户数组初始化集合
    this.collection = new UserInputCollection(usersData);
    this.render();
  },
  render: function() {
    // 遍历集合，渲染每个用户的输入项
    this.collection.each(userModel => {
      const itemView = new UserInputItemView({ model: userModel });
      this.$el.append(itemView.render().el);
    });
    return this;
  }
});

假设你的用户数据数组是这样的，直接传入主视图就行：

// 示例用户数据数组
const usersData = [
  { userName: '用户1', maxLength: 100 },
  { userName: '用户2', maxLength: 150 },
  { userName: '用户3', maxLength: 80 }
];

// 初始化主视图，渲染所有输入项
new UserInputMainView(usersData);

额外说明 #

• 这里用了Backbone默认依赖的Underscore模板引擎，你可以根据截图的样式调整模板里的HTML结构和CSS类名。
• textarea的maxlength属性会直接限制输入字数，配合视图里的剩余字数计算，实现视觉提示+输入限制的双重效果。
• 每个输入项的视图独立绑定自己的模型和事件，不会出现多个输入框互相干扰的问题，完全符合Backbone的MVC数据流逻辑。

内容的提问来源于stack exchange，提问作者Harsha Kakumanu