jquery - 如何在 knockout 中显示带有悬停文本的警告图标，以警告文本框中输入的重复记录

Question

我对 Jquery 和 Knockout 都是新手...我正在使用 KO 可观察数组来绑定(bind)网格中的数据(使用 HTML 表)，当用户在文本框中输入相同的值时，我想显示带有悬停文本的警告图标在 KO 数组中可用(数据已显示在网格中)...我的消息应显示先前的值和已使用的步骤号。我有两个网格模板，一个用于显示记录，另一个用于编辑

脚本部分:

function UniqueViewModel(){
    var dataValues=ko.observableArray([{stepNo:1,stepText:"test1"},
                                       {stepNo:2,stepText:"test2"},
                                       {stepNo:3,stepText:"test3"},
                                       {stepNo:4,stepText:"test4"}])

}
ko.applyBindings(new UniqueViewModel());

HTML:

\\View Template
<tbody data-bind="foreach:dataValues">
    <tr>
        <td data-bind="text: stepNo"> </td>
        <td data-bind="text: stepText"> </td>   
    </tr>
</tbody>

\\Edit Template
<tbody data-bind="foreach:dataValues">
    <tr>
        <td><input type="text" data-bind:"value:stepNo"/></td>
        <td><input type="text" data-bind:"value:stepText"/></td>
        </tr>
</tbody>
</table>

Answer 1

您可以创建一个自定义 js 类，其中包含用于获取提示的计算可观察值，而不是将普通 js 对象放入 observable 数组中:

function Step(no, text, parentObject) {
  var self = this;
  var parent = parentObject;

  self.stepNo = ko.observable(no);
  self.stepText = ko.observable(text);

  self.notUniqueHint = ko.computed(function () {
    var duplicate = ko.utils.arrayFirst(parent.dataValues(), function (item) {
      return item.stepText() == self.stepText() && item.stepNo() != self.stepNo();
    })

    if (duplicate) {
      return "Item is duplicated Step #" + duplicate.stepNo() + " with text - " + duplicate.stepText();
    }

    return "";
  });
}

function UniqueViewModel() {
  var self = this;
  self.dataValues = ko.observableArray();
  self.dataValues.push(new Step(1, "Test1", self));
  self.dataValues.push(new Step(2, "Test2", self));
  self.dataValues.push(new Step(3, "Test3", self));
}

ko.applyBindings(new UniqueViewModel());

并相应地更新 html:

<table>
  <tbody data-bind="foreach:dataValues">
    <tr>
      <td data-bind="text: stepNo"></td>
      <td data-bind="text: stepText"></td>
    </tr>
  </tbody>
</table>
<table>
  <tbody data-bind="foreach:dataValues">
    <tr>
      <td>
        <input type="text" data-bind="value: stepNo" />
      </td>
      <td>
        <input type="text" data-bind="value: stepText" />
        <img width='16px' data-bind="visible: notUniqueHint, attr: {title: notUniqueHint}" src='http://www.veryicon.com/icon/preview/System/Function/warning%2048%20Icon.jpg'
        />
      </td>
    </tr>
  </tbody>
</table>

这是工作 fiddle :http://jsfiddle.net/vyshniakov/mbBZC/2/

附注您的 html 有一些语法错误，我已更正它们。