2

私は Jquery と Knockout の両方に不慣れです...私は KO オブザーバブル配列を使用して (HTML テーブルを使用して) グリッドにデータをバインドしています。ユーザーがテキスト ボックスに同じ値を入力すると、ホバー テキスト付きの警告アイコンを表示したいと考えています。配列（データはすでにグリッドに表示されています）...私のメッセージは、以前の値と、すでに使用されているステップ番号を表示する必要があります。グリッド用の 2 つのテンプレートがあります。1 つはレコードを表示するためのもので、もう 1 つは編集用です。

スクリプト部分:

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オブジェクトをobservable配列に配置する代わりに、ヒントを取得するための計算されたobservableを含むカスタムjsクラスを作成できます。

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 に答える