在动态 knockoutJS 绑定后使用 JQuery

Question

knoutJS动态绑定后有没有办法使用JQuery？

例如：

<!-- ko foreach: editFields -->
<input class='editable' style='display:none' type="text" data-bind="attr: {id: field_id}" />
<!-- /ko -->

如果 field_id = "电话"：

$('#phone').attr('disabled', true);

或者任何 JQuery 转换都不会发生。我假设绑定是在所有执行之后完成的。所以没有声明 $('#phone')。

有没有办法将 JQuery 应用于这些元素？

谢谢！

Answer 1

这样做的正确方法是不要使用 jQuery，而是使用 KnockoutJS 的禁用绑定。

在您的数据绑定字段中，为您的 ID 设置属性值和禁用绑定。例如：

data-bind="attr: {id: field_id}, disable: disableFlag"

然后在你的视图模型上，确保你有一个 ko observable 来驱动它 EG：

this.disableFlag = ko.observable(false);

确保在声明时确实使用了提示值，这样 KO 才能正确判断。

更新

为了让这更容易理解。如果您将它与动态填充的列表一起使用，那么可能值得为行创建一个实际的视图模型。

当我第一次开始使用淘汰赛时，我过去只是直接从我从后端获取的 JSON 中创建行，但我很快发现我遇到了很多问题，使实际模型完全按照我的方式工作想要，所以我开始为主视图模型中的行实际编写具体的视图模型。

我还发现将模型组合为独立对象会更好。

通常，我将从这样的行视图模型开始：

var RowViewModel = (function ()
{
  function RowViewModel(inputRecord)
  {
    this.RecordId = ko.observable(0);
    this.Name = ko.observable('');
    this.SomeOtherData = ko.observable('');
    this.disabledFlag = ko.observable(false);
    ko.mapping.fromJS(inputRecord, {}, this);
  }

  return RowViewModel;
})();

然后我为主表、列表或我正在填充的重复结构构建一个更大的视图模型，如下所示：

var MainViewModel = (function ()
{
  function MainViewModel(targetElement)
  {
    this.loadComplete = ko.observable(false);
    this.tableRows = ko.observableArray([]);

    ko.applyBindings(this, targetElement);
    $.support.cors = true;
  }

  IndexViewModel.prototype.Load = function ()
  {
    $.getJSON("/some/place/to/get/data_from", function (data)
    {
      if (data.length > 0)
      {
        _this.tableRows(ko.utils.arrayMap(data, function (item)
        {
          return new RowViewModel(item);
        }));
      } else
      {
        _this.tableRows([]);
      }
      _this.loadComplete(true);
    });
  };

  return IndexViewModel;
})();

如您所见，在主视图模型中，我们使用 ko 实用函数将传入数据映射到行视图模型的集合。

由于每一行都有一个禁用标志，将其设置为 true 以禁用该行，将把该实际行置于禁用状态，而不需要 jQuery。