2

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

脚本部分：

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>
4

1 回答 1

3

您可以创建一个自定义 js 类，而不是将普通的 js 对象放入 observable 数组，该类将包含计算的 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>

这是工作小提琴：http: //jsfiddle.net/vyshniakov/mbBZC/2/

PS 你的 html 有一些语法错误，我更正了。

于 2013-01-22T14:54:08.330 回答