0

コンボボックスからノックアウトリストに値を表示する際に問題が1つあります。コンボボックスからアイテムを選択している下の画像をご覧ください。コンボボックスからアイテムを選択すると、すべての行が同じ値で更新されます。 同じ値のリスト

左側のリストには、コンボボックスの名前はデータベースに保存されませんが、IDは保存されます。したがって、コンボボックスとリストは、ステータスと呼ばれる列に接続されています。私のHTMLでは、以下のようにリストを定義しました。ここで、ChangeControlNameはリストにバインドしたいものです。

<tbody data-bind="foreach: versionDataByProduct">

    <tr data-bind="click: $root.EditVersionDetail, css: { selected: isSelected}"   >

        <td data-bind="text: Name "></td>
        <td data-bind="text: Code"></td>
        <td data-bind ="text: PlatformVersionName"></td>
        <td data-bind ="text: ChangeControlName"></td>
      </tr>

comboxは私のviewmodelに以下のようにロードされます

     // Load Change Control List
    function loadChangeControlList() {
        $.ajax({
            url: "../RestService/Product/ChangeControlList",
            type: "PUT",
            contentType: 'application/json',
            processData: false,
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            },
            success: function (allData) {
                var mappedChangeControls = $.map(allData, function (item) {

                    return new changeControlList(item);
                });
                self.ChangeControls(mappedChangeControls);

            }
        });
    }

以下のようにコンボボックスをhtmlでバインドしました

<td><select id="selModuleType"  data-bind="options: $root.modules,  optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'" /></td>

上の画像に示されている左側の行を選択すると、選択された行が表示されます。値editModuleIdのサブスクライブイベントで、以下のように選択した行に値を割り当てようとします。

self.editChangeControl.subscribe(function (value) {
        if (!value) {
            return;
        }

        self.selecteditem().ChangeControlId(value.Status());

        self.selecteditem().ChangeControlName(value.ChangeControl());

    });

上記のコードでは、selecteditemに選択した行が含まれています。上記のコードでわかるように、ChangeControlIdは、コンボボックスから選択した値のIDであり、これはリストに正しく設定されています。しかし、名前が正しく設定されていません。その理由は、ChangeControlIdがデータベースに保存されているためです。ChangeControlIdは、これらの行が表示されるテーブルの一部です。ChangeControlName表示目的だけで必要です。私は何をすべきか？計算されたオブザーバブルも使用してみましたが、リストに「オブジェクトオブジェクト」と表示されます。以下のように計算されたオブザーバブルを使用しました

       this.ChangeControlName = ko.computed({
            read: function () {
                debugger;
                return ko.utils.arrayFirst(self.ChangeControls(), function (item) {
                    if (item.Status() === productVersionId.ChangeControlId()) {
                        return item.ChangeControl();
                    }
                });
            },

            write: function (value) {
                console.log("Value i get " + value);
                return value;
            }
        });
4

1 に答える 1

1

さあ、あなたが持っているデザインはあなたが行きたい場所にたどり着くのを非常に難しくしています。

var VersionModel = function () {
  var self = this;

  self.changeControls = ko.observable([{
    name: "Addressed",
    value: 1
  }, {
    name: "Not Addressed",
    value: 2

  }]);

  console.log(self.changeControls()[0].value);
  self.versionDataByProduct = [{
    Name: "DS",
    Code: "sd",
    PlatformVersionName: "5.5.3",
    ChangeControl: ko.observable(self.changeControls()[0]),
  }, {
    Name: "EF",
    Code: "sd",
    PlatformVersionName: "5.5.3",
    ChangeControl: ko.observable(self.changeControls()[0])
  }];
  self.selected = ko.observable(self.versionDataByProduct[0]);
  self.EditVersionDetail = function (item) {

    self.selected(item);
  };
  self.editModuleId = ko.observable();
  self.modules = [{
    editModuleId: 1,
    ModuleName: "ABW-BP-Batch Input"
  }];

  self.editChangeControl = ko.computed({
    read: function () {
      if (self.selected()) {
          console.log('something selected and editChangeControl is changing');
        return self.selected().ChangeControl();
      }
      return '';
    },
    write: function (value) {
      if (value && value != '') {
          console.log('writing new value');
        self.selected().ChangeControl(value);
      }
    }
  });

}
ko.applyBindings(new VersionModel());

およびhtml：

<table class="floatLeft">
  <thead>
    <tr>
      <th>Version name</th>
      <th>Version Code</th>
      <th>Framework version</th>
      <th>Change control</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: versionDataByProduct">
    <tr data-bind="click: $root.EditVersionDetail, css: { selected: $root.selected() == $data}">
      <td data-bind="text: Name "></td>
      <td data-bind="text: Code"></td>
      <td data-bind="text: PlatformVersionName"></td>
      <td data-bind="text: ChangeControl().name,attr:{'data-value':ChangeControl().value}"></td>
    </tr>
  </tbody>
</table>
<select id="selModuleType" data-bind="options: $root.modules,  optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'"></select>
<select id="selfChangeControl" data-bind="options: $root.changeControls,  optionsCaption: 'Please select Change control...' , value: editChangeControl , optionsText: 'name'"></select>

http://jsfiddle.net/2Khk3/4/

于 2013-02-01T15:19:32.547 に答える