Question

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

例如：

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

如果field_id =＆＃34;电话＆＃34;：

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

或者它刚刚赢得的任何JQuery转换都没有发生。我假设在所有例外情况之后完成绑定。所以没有声明$（＆＃39; #phone＆＃39;）。

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

谢谢！

Answer 1

执行此操作的正确方法不是使用jQuery，而是使用KnockoutJS的禁用绑定。

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

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。

在动态knockoutJS绑定之后使用JQuery

1 个答案:

更新