data-binding - 更新のために observableArray でデータを管理する方法がわからない

Question

今後のプロジェクトに取り入れたいので、KO をいじり始めたところです。余暇に仕事で Web サービスをいじっていましたが、これは基本的に、データを使って何かをすることから始めて、それから別のことをするというものでした。最初に、薬物名のリストを返しました。では、返された結果の数を追加しましょう。では、個々の薬の詳細をモーダルに入力しましょう。では、薬品名を編集しましょう。本当の韻や理由はありません。ただ何かを考え出し、KO で遊んでいます。

どこでも更新されるように、データを実際に管理する方法がわからないところまで来ています。私が持っているものを説明し、問題を説明するスクリーンショットを作成しました。

http://i.imgur.com/5qNWQ.jpg

「y」ボタンをクリックして検索結果を取得します。次に、「Yasmin 28」ドラッグを選択します
モーダルウィンドウでその薬の詳細ビューを取得します
薬品名を編集して「保存」ボタンをクリック
モーダルウィンドウで薬剤名が更新されます
DOM のその部分をクロールし、古い薬の名前を新しい薬の名前に置き換えるだけで、検索結果の薬の名前を「チート」して更新します。

これの問題は、KO の観察可能な性質を利用していないことです...モーダルを閉じて "Yasmin 28" ドラッグリンクをもう一度クリックすると、モーダルには "Yasmin 28" が表示されますが、（「素晴らしいもの」）に変更しただけです。

observableArray でプロパティが変更されたかどうかを追跡する方法がよくわかりません。2 つの observableArray を作成しました。1 つは検索結果の薬物名のリストを保持し、もう 1 つは薬物の詳細を保持します。また、現在の薬名のオブザーバブルも作成しました。

どこでも私の薬の名前を追跡するために何をする必要があるか誰か説明できますか? 以下のコードと、作業中の JSON を一番下に含めました。

<div id="shell">
    <button class="load" value="j">j</button>
    <button class="load" value="k">k</button>
    <button class="load" value="x">x</button>
    <button class="load" value="y">y</button>
    <button class="load" value="z">z</button>
    <p id="loading"><img src="#{facesContext.externalContext.requestContextPath}/img/spinner.gif"/></p>

    <h3 data-bind="visible: drugList().length > 0"><span data-bind="text: count" class="count"></span> records returned</h3>

    <ul data-bind="foreach: drugList">
        <li>
            <span data-bind="text: drugName" class="results_drug_name"></span>
            <a data-bind="click: $root.showDetails" href="#" class="show">show details</a>
        </li>
    </ul>
</div>

<!-- start modal: drug details -->
<div id="dialog" data-bind="jqDialog: {autoOpen: false, title: drugName}">
    <p id="dialog_save_message" class="message_success">Changes saved successfully!!!!!!!!</p>

    <table data-bind="foreach: drugListDetails" class="table" width="100%" cellpadding="0" cellspacing="0" border="1">
        <tr>
            <th scope="row">pdlId</th>
            <td data-bind="text: pdlId"></td>
        </tr>
        <tr>
            <th scope="row">drugName</th>
            <td>
                <span data-bind="text: $root.drugName" class="readonly"></span>
                <input id="edit_drugname" class="edit_textfield" type="text" value="" size="35" />
                <button data-bind="click: $root.editSave" class="edit_buttons save">Save</button>
                <button data-bind="click: $root.editCancel" class="edit_buttons cancel">Cancel</button>
                <ul class="detail_actions">
                    <li><a data-bind="click: $root.edit" href="#" class="edit">edit</a></li>
                </ul>
            </td>
        </tr>

        <tr>
            <th scope="row">dosageFormDesc</th>
            <td data-bind="text: dosageFormDesc"></td>
        </tr>
        <tr>
            <th scope="row">strength</th>
            <td data-bind="text: strength"></td>
        </tr>
        <tr>
            <th scope="row">activeIngredient</th>
            <td data-bind="text: activeIngredient"></td>
        </tr>
        <tr>
            <th scope="row">tier</th>
            <td data-bind="text: tier"></td>
        </tr>
        <tr>
            <th scope="row">ancillaryCharge</th>
            <td data-bind="text: ancillaryCharge"></td>
        </tr>
        <tr>
            <th scope="row">preauthCode</th>
            <td data-bind="text: preauthCode"></td>
        </tr>
        <tr>
            <th scope="row">quantityLimit</th>
            <td data-bind="text: quantityLimit"></td>
        </tr>
        <tr>
            <th scope="row">prefAlternative</th>
            <td data-bind="text: prefAlternative"></td>
        </tr>
        <tr>
            <th scope="row">specialtyDrug</th>
            <td data-bind="text: specialtyDrug"></td>
        </tr>
        <tr>
            <th scope="row">partbCob</th>
            <td data-bind="text: partbCob"></td>
        </tr>
        <tr>
            <th scope="row">drugClassGroupId</th>
            <td data-bind="text: drugClassGroupId"></td>
        </tr>
        <tr>
            <th scope="row">drugClassId</th>
            <td data-bind="text: drugClassId"></td>
        </tr>
        <tr>
            <th scope="row">drugClass</th>
            <td data-bind="text: drugClass"></td>
        </tr>
        <tr>
            <th scope="row">genericInd</th>
            <td data-bind="text: genericInd"></td>
        </tr>
        <tr>
            <th scope="row">tip</th>
            <td data-bind="text: tip"></td>
        </tr>
    </table>
</div>
<!-- end modal: drug details -->

<script>
$(function() {
    $('.load').click(function() {
        var $letter = $(this).attr('value');

        //show spinner
        $('#loading').show();

        //load in drug list data
        $.getJSON('/PreferredDrugList/service/preferredDrugs/' + $letter, function(data) {
            //hide spinner
            $('#loading').hide();

            //replace drugList observableArray data
            //preferredDrugs is an array of objects, each elem is an individual drug
            myViewModel.drugList(data.preferredDrugs);

            //replace count observable data
            myViewModel.count(data.count);
        });//end getJSON
    });//end click

    //setup modal dialog options
    $('#dialog').dialog({
        autoOpen: false,
        closeOnEscape: true,
        modal: true,
        width:850,
        height:500
    });

});//end ondomready

//custom binding to initialize a jQuery UI dialog
ko.bindingHandlers.jqDialog = {
    init: function(element) {
       ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).dialog("destroy");
        });
    },
    update: function(element, valueAccessor) {
       var options = ko.toJS(valueAccessor());

        if (options) {
            $(element).dialog(options);
        }           
    }
};

var myViewModel = {
    count:                ko.observable(),        //# of records returned
    drugList:            ko.observableArray(),    //list of drug names - an array of objects
    drugListDetails:    ko.observableArray(),    //list of individual drug details
    drugName:            ko.observable(),        //current drug name

    //show drug details in modal
    //func gets passed the current observableArray elem (the individual drug info we clicked on, this is an object)
    showDetails: function(obj) {
        //replace current drug name observable data
        myViewModel.drugName(obj.drugName);

        //replace drugListDetails observableArray data, otherwise we'll append data to the modal
        myViewModel.drugListDetails([]);

        //push individual drug info to details observableArray
        myViewModel.drugListDetails.push(obj);

        //show dialog
        $('#dialog').dialog('open');

        return false;
    },

    //edit drug from modal
    edit: function(obj) {
        var $edit         = $('#dialog').find('td .edit'),
            $currentTD    = $edit.closest('td');

        $currentTD.addClass('editing');
        $currentTD.find('.readonly').hide();
        $currentTD.find('.edit_textfield').show().select();
        $currentTD.find('.edit_buttons').show();

        return false;
    },

    //save an edit
    editSave: function(obj) {
        alert('TODO save back to the server');

        var $saveBtn    = $('#dialog').find('td .save'),
            $currentTD    = $saveBtn.closest('td'),
            newDrugName = $('#edit_drugname').val(),
            $dialog_save_message = $('#dialog_save_message');

        //save new drug name to observable
        myViewModel.drugName(newDrugName);

        $currentTD.removeClass('editing');
        $currentTD.find('.readonly').show();
        $currentTD.find('.edit_textfield').hide();
        $currentTD.find('.edit_buttons').hide();

        $dialog_save_message.slideDown('slow', function() {
            //animation complete
            setTimeout(function() {
                $dialog_save_message.slideUp();
            }, 3000);
        });

        //cheat and update search results list with new drug name
        $('.results_drug_name').each(function(index, elem) {
            var $text = $(this).text();

            if ($text === obj.drugName) {
                $(this).text(newDrugName).addClass('edited');
            }
        });
    },

    //cancel an edit
    editCancel: function(obj) {
        var $cancelBtn     = $('#dialog').find('td .cancel'),
            $currentTD    = $cancelBtn.closest('td');

        $currentTD.removeClass('editing');
        $currentTD.find('.readonly').show();
        $currentTD.find('.edit_textfield').hide();
        $currentTD.find('.edit_buttons').hide();
    }
};

ko.applyBindings(myViewModel);

<!--what's returned from the web service-->
<pre>
{
    "preferredDrugs": [(8)
        {
            "pdlId": 8090,
            "drugName": "y-cof-dmx",
            "dosageFormDesc": "Liquid",
            "strength": "4MG/5ML; 15MG/5ML; 7.5MG/5ML",
            "activeIngredient": "BROMPHENIRAMINE MALEATE; DEXTROMETHORPHAN HYDROBROMIDE; PHENYLEPHRINE HYDROCHLORIDE",
            "tier": "OTC",
            "ancillaryCharge": "NA",
            "preauthCode": " ",
            "quantityLimit": " ",
            "prefAlternative": null,
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 74,
            "drugClassId": 152,
            "drugClass": "Respiratory Tract Agents » Antitussives",
            "genericInd": "1",
            "tip": " "
        },-
        {
            "pdlId": 13417,
            "drugName": "YASMIN 28",
            "dosageFormDesc": "Tablet",
            "strength": "3MG; 0.03MG",
            "activeIngredient": "DROSPIRENONE; ETHINYL ESTRADIOL",
            "tier": "3",
            "ancillaryCharge": "AC",
            "preauthCode": " ",
            "quantityLimit": "28.0 tabs each 28 days",
            "prefAlternative": "ethinyl estradiol/drospirenone",
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 3,
            "drugClassId": 200,
            "drugClass": "Hormones and Synthetic Substitutes » Contraceptives",
            "genericInd": "0",
            "tip": " "
        },-
        {
            "pdlId": 24765,
            "drugName": "YAZ",
            "dosageFormDesc": "Tablet",
            "strength": "3MG; 0.02MG",
            "activeIngredient": "DROSPIRENONE; ETHINYL ESTRADIOL",
            "tier": "3",
            "ancillaryCharge": "AC",
            "preauthCode": " ",
            "quantityLimit": "28.0 tabs each 28 days",
            "prefAlternative": "ethinyl estradiol/drospirenone",
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 3,
            "drugClassId": 200,
            "drugClass": "Hormones and Synthetic Substitutes » Contraceptives",
            "genericInd": "0",
            "tip": " "
        },-
        {
            "pdlId": 2252,
            "drugName": "YERVOY",
            "dosageFormDesc": "Solution",
            "strength": "50MG/10ML",
            "activeIngredient": "IPILIMUMAB",
            "tier": "NC",
            "ancillaryCharge": "NA",
            "preauthCode": " ",
            "quantityLimit": " ",
            "prefAlternative": null,
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 115,
            "drugClassId": 1,
            "drugClass": "Antineoplastic Agents",
            "genericInd": "0",
            "tip": " "
        },-
        {
            "pdlId": 20993,
            "drugName": "YERVOY",
            "dosageFormDesc": "Solution",
            "strength": "200MG/40ML",
            "activeIngredient": "IPILIMUMAB",
            "tier": "NC",
            "ancillaryCharge": "NA",
            "preauthCode": " ",
            "quantityLimit": " ",
            "prefAlternative": null,
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 115,
            "drugClassId": 1,
            "drugClass": "Antineoplastic Agents",
            "genericInd": "0",
            "tip": " "
        },-
        {
            "pdlId": 564,
            "drugName": "YF-VAX",
            "dosageFormDesc": "Injection",
            "strength": "0",
            "activeIngredient": "YELLOW FEVER VACCINE",
            "tier": "NC",
            "ancillaryCharge": "NA",
            "preauthCode": " ",
            "quantityLimit": " ",
            "prefAlternative": null,
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 79,
            "drugClassId": 284,
            "drugClass": "Serums, Toxoids and Vaccines » Vaccines",
            "genericInd": "0",
            "tip": " "
        },-
        {
            "pdlId": 8910,
            "drugName": "yodefan-nf chest congestion",
            "dosageFormDesc": "Liquid",
            "strength": "200MG/5ML",
            "activeIngredient": "GUAIFENESIN",
            "tier": "OTC",
            "ancillaryCharge": "NA",
            "preauthCode": " ",
            "quantityLimit": " ",
            "prefAlternative": null,
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 84,
            "drugClassId": 155,
            "drugClass": "Respiratory Tract Agents » Expectorants",
            "genericInd": "1",
            "tip": " "
        },-
        {
            "pdlId": 13101,
            "drugName": "YODOXIN",
            "dosageFormDesc": "Tablet",
            "strength": "650MG",
            "activeIngredient": "IODOQUINOL",
            "tier": "3",
            "ancillaryCharge": "NA",
            "preauthCode": " ",
            "quantityLimit": " ",
            "prefAlternative": "iodoquinol",
            "specialtyDrug": " ",
            "partbCob": " ",
            "drugClassGroupId": 164,
            "drugClassId": 277,
            "drugClass": "Anti-infective Agents » Antiprotozoals",
            "genericInd": "0",
            "tip": " "
        }-
    ],-
    "count": 8
}   
</pre>

</script>

score 1 · Accepted Answer

最初drugListDetailsに、データの複製を保持することで混乱を招くため、配列を削除します。

次に、とを使用ko.mapping.fromJSして、監視可能な配列との間でko.mapping.toJSマップします。data.preferredDrugsこれknockoutにより、配列のすべての要素の変更を GUI で追跡できます。これらのドキュメントは、ここにあります。

mappingプラグインを使用したくない場合は、手動でマッピングを行うこともできます。

3 番目showDetailsに、配列内の各エントリに新しい要素を追加します。data.preferredDrugsデフォルトはfalseです。これは、次のステップでダイアログを表示するかどうかを決定するために使用されます。既存の要素が呼び出されshowDetailsたときに、要素を切り替える必要があります。$root.showDetails

4 番目に、ダイアログdivを変更して配列を使用し、その値を各ドラッグ要素の値にdrugListバインドします。これにより、複数の非表示のダイアログが作成されるため、それぞれの値を変更することができます。visibleshowDetailsid

data-binding - 更新のために observableArray でデータを管理する方法がわからない

1 に答える 1

Related

Reference