动态创建订阅事件——淘汰赛答案

【问题标题】：Dynamically create subscribe event - knockout动态创建订阅事件——淘汰赛
【发布时间】：2017-10-30 18:58:37
【问题描述】：

我在淘汰赛中动态创建字段。下面的代码将创建一个文本框或一个下拉选择列表。输入字段绑定到我也订阅的属性“响应”。当用户更改选择列表时，我想知道使用了哪种类型的控件（例如 Textbox 或 DropDownList）。我的问题是淘汰赛总是告诉我错误的类型；文本框，这是最后创建的字段：

$(document).ready(function() {

   var fields = [{
    "Label": "Enter The State",
    "Length": 75,
    "Type": "DropDownList",
    "IsRequired": true,
    "PreValue": "New York, New Jersey",
    "Response": ""
  }, {
    "Label": "Enter Reason",
    "Length": 75,
    "Type": "DropDownList",
    "IsRequired": true,
    "PreValue": "Good,Bad,Ugly",
    "Response": ""
  }, {
    "Label": "Enter City",
    "Length": 75,
    "Type": "TextBox",
    "IsRequired": true,
    "PreValue": "",
    "Response": ""
  }];

/* knockout */
function DynamicFormViewModel() {
    var self = this;
    self.fields = fields;
    self.selectItem = function(value, text) {
      this.value = value;
      this.text = text;
    };
    for (var i = 0; i < self.fields.length; i++) {
      var field = self.fields[i];
      if (field.Type == 'TextBox') {
        field.Response = ko.observable(field.PreValue);
      } else if (field.Type === 'DropDownList') {
        field.Items = [];
        var itms = field.PreValue.split(",");
        field.Items.push(new self.selectItem('', '--' + field.Label + '--'));
        for (var s = 0; s < itms.length; s++) {
          var sItem = new self.selectItem(itms[s], itms[s]);
          field.Items.push(sItem);
        }
        field.Response = ko.observable(field.PreValue);
      } else {
        field.Response = ko.observable(field.PreValue);
      }
      field.Response.subscribe(function(newValue) {
        if (newValue !== undefined && newValue != null && newValue.length > 0) {
         alert(field.Type);
        }
      });
   };
  };
  var viewModel = new DynamicFormViewModel();
  ko.applyBindings(viewModel);

});

这是一个工作示例：jsFiddle

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

您的响应订阅中的变量“字段”正在被周围的循环更改，因此引用始终是循环中的最后一项。

您可以更改订阅函数以传递它应该用于其“this”变量的上下文，并改用它。

field.Response.subscribe(function(newValue) {
  if (newValue !== undefined && newValue != null && newValue.length > 0) {
    alert(this.Type);
  }
}, field);

【讨论】：