0

http://jsfiddle.net/Gm64C/2/

使用されるデータは、javascriptパネルの上部にインラインで表示されます。

結果パネルの[詳細を表示]リンクをクリックすると、表のリストの下に入力されたその薬に関連するデータがさらに表示されます。DrugName行の「編集」をクリックすると、その薬剤名を変更できます。名前を変更すると、データテーブルとデータテーブルの上のヘッダーに反映されます。結果パネルの上部にあるリスト（つまり、別のobservableArray）では更新されません。

これをすべて1つのobservableArrayで機能させる方法がわかりません。私はdrugListoservableArrayにdata.preferredDrugsを入力しています（これは、foreach：drugListを使用して繰り返すオブジェクトの配列です）。これにデータだけを入力すると、オブジェクトのpreferredDrugs配列だけを反復処理する方法がわかりません。これが、2つのobservableArraysになってしまった理由です。1つは薬剤名用、もう1つは薬剤詳細用です。

1つのobservableArrayを使用してこれを機能させるにはどうすればよいですか。テーブル内の薬剤名を編集すると、どこにでも反映されます。

4

1 に答える 1

0

jqueryへの依存を削除するために、フィドルを作り直しました。

http://jsfiddle.net/jeff1203/EPFbQ/

修正について指摘するいくつかの事柄：

  • 名前を編集して変更を表示できるようにしたいので、少なくとも名前を表示可能にする必要があります。

    self.drugList = ko.observableArray(
    ko.utils.arrayMap(data.preferredDrugs, function (obj) {
        return ko.utils.extend(obj, {
            "drugName": ko.observable(obj["drugName"]),
        });
    })
);

  • 選択した薬剤、編集テキストボックスの内容、および編集しているかどうかの状態を追跡すると、より簡単になります。これにより、ビューとビューモデルコードが簡素化されます。ノックアウトは残りすべてを解決します。

    // current drug
self.currentDrug = ko.observable();

// flag indicating we're editing the currently selected drug name
self.isEditing   = ko.observable(false);
// observable representing the editing text box
self.editTextBox = ko.observable();
// this will help with setting focus on the text box
self.editTextBox.hasfocus= ko.observable(false);

  • 編集内容を保存するには、選択したオブジェクトの名前を編集テキストボックスの内容に設定するだけです。

    // save an edit
self.editSave = function (obj) {
    // copy the edited name to the current drug name
    obj.drugName(self.editTextBox());

    self.isEditing(false);
};

  • withバインディングを使用して、以前のようにではなく、バインディングのコンテキストを設定できforeachます。

  • バインディングを使用してcssクラスを設定し、可視性を切り替えます。ノックアウトがうなり声を上げます。

    <td data-bind="css: { 'editing': $root.isEditing }">
    <span data-bind="visible: !$root.isEditing(), text: drugName" class="readonly"></span>
    <input id="edit_drugname" data-bind="value: $root.editTextBox, hasfocus: $root.editTextBox.hasfocus, css: { 'edit_textfield': !$root.isEditing() }" type="text" value="" size="35" />
    <button data-bind="click: $root.editSave, css: { 'edit_buttons': !$root.isEditing() }" class="save">Save</button>
    <button data-bind="click: $root.editCancel, css: { 'edit_buttons': !$root.isEditing() }" class="cancel">Cancel</button>
    <ul class="detail_actions" data-bind="visible: !$root.isEditing()">
        <li><a data-bind="click: $root.edit" href="#" class="edit">edit</a></li>
    </ul>
</td>
于 2012-08-31T16:59:50.537 に答える