0

特定の配列のアイテムのプロパティのプロパティをどのように使用すればよいか理解できません。

以下は、私が取得したJSON応答の例です。

[{
"Id":"3bddaa55-5cae-4d9d-8c2f-3cff9a853aa0",
"ServiceRequestId":"00000000-0000-0000-0000-000000000000",
"AuthorizationRequestId":"48c73685-ee1e-4eea-8bf0-74320d37c80c",
"Quantity":0,
"TreatmentStartDate":null,
"Dosage":{"Id":"cbdbed9e-4c80-4f5a-8a4b-8185c24e45a0",
          "Value":13.4,
          "Unit":"Spiel mit mehr"},
"Medication":{"IsAutoApproveWhiteList":null,
              "IsPartB":null,"Id":"b0f0e31c-3467-4d73-9dd5-e806a20223a3",
              "Name":"Pills of Awesomeness",
              "Code":"J1100",
              "BrandName":"Awesome Pills",
              "GenericName":"Awesome",
              "UnitOfMeasure":"Pounds",
"Dosages":[{"Id":"dd6e7cfb-252c-46c1-815f-832f9501e9ce",
            "Value":100,
            "Unit":"Fart"},
            {"Id":"4dc88918-c359-41fd-9eb8-50699ba627fd",
             "Value":75.6,
             "Unit":"Ride wit me."}],
            "MedicationType":725060001,
            "AllowedDiagnoses":null},
"DirectionsForUse":{"Id":"9faba6ed-5a67-4b45-bedb-a49191274cc7",
                    "Name":"Do not eat sand",
                    "IsValidAsLoadingDose":false},
"Refills":0,
"RequiredRegimenMedicationId":null,
"OptionalRegimenMedicationId":null,
"NonRegimenMedicationId":null,
"RequiredRegimenMedicationDosingId":null,
"OptionalRegimenMedicationDosingId":null,
"NonRegimenMedicationDosingId":null,
"DoseType":725060000,
"TypeOfMedication":0,
"MedicationType":0,
"Bsa":null,
"MaximumDosage":null,
"MaximumDosageFormulaId":null,
"NotAutoApprovedReason":0}]

次は私が設定しようとしているコードです:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Dose</th>
            <th>Directions For Use</th>
            <th>Treatment Start Date</th>
            <th>Qty</th>
            <th>Refills</th>
            <th>Purchase Type</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: ServiceItems">
        <tr>
            <td><span data-bind="text: $root.Medication.DisplayName"></span></td>
            <td><span data-bind=""></span></td>
            <td><span data-bind=""></span></td>
            <td><span data-bind=""></span></td>
            <td><span data-bind="text: Quantity"></span></td>
            <td><span data-bind="text: Refills"></span></td>
            <td><span data-bind=""></span></td>
        </tr>
    </tbody>
</table>




@section Scripts
{
    <script type="text/javascript">

        function ServiceItem(data) {
            var self = this;

            self.TreatmentStartDate = ko.observable(data.TreatmentStartDate);
            self.ServiceRequestId = data.ServiceRequestId;
            self.DoseType = ko.observable(data.DoseType);
            self.Medication = ko.observable(data.Medication);
            self.Dosage = ko.observable(data.Dosage);
            self.DirectionForUse = ko.observable(data.DirectionForUse);
            self.RequiredRegimenMedicationId = ko.observable(data.RequiredRegimenMedicationId);
            self.RequiredRegimenMedicationDosingId = ko.observable(data.RequiredRegimenMedicationDosingId);
            self.OptionalRegimenMedicationId = ko.observable(data.OptionalRegimenMedicationId);
            self.OptionalRegimenMedicationDosingId = ko.observable(data.OptionalRegimenMedicationDosingId);
            self.NonRegimenMedicationId = ko.observable(data.NonRegimenMedicationId);
            self.NonRegimenMedicationDosingId = ko.observable(data.NonRegimenMedicationDosingId);
            self.Quantity = ko.observable(data.Quantity);
            self.Refills = ko.observable(data.Refills);
        }

        function Medication(data) {
            var self = this;

            self.Name = data.Name;
            self.Code = data.Code;
            self.BrandName = data.BrandName;
            self.GenericName = data.GenericName;
            self.UnitOrMeasure = data.UnitOrMeasure;
            self.Dosages = data.Dosages;
            self.MedicationTypes = data.MedicationTypes;
            self.AllowedDiagnoses = data.AllowedDiagnoses;

            self.DisplayName = ko.computed(function () {
                if (self.Name != null && self.Name != "") {
                    return self.Name;
                } else {
                    return self.BrandName;
                }
            });
        }

        function Dosage(data) {
            var self = this;

            self.Id = data.Id;
            self.Value = data.Value;
            self.unit = data.Unit;
        }

        function DirectionForUse(data) {
            var self = this;

            self.Id = data.Id;
            self.Name = data.Name;
            self.IsValidAsLoadingDose = data.IsValidAsLoadingDose;
        }

        function ServiceItemsViewModel() {
            var self = this;

            self.ServiceItems = ko.observableArray();

            //Operations
            self.add = function(item) {
                self.ServiceItems.add(item);
            };

            self.remove = function(item) {
                self.ServiceItems.remove(item);
            };
        }

        var viewModel = new ServiceItemsViewModel();

        $.getJSON('/Mapping/GetServiceItems', function (data) {
            ko.mapping.fromJS(data, {}, viewModel.ServiceItems);
        });

        ko.applyBindings(viewModel);

    </script>
}

私が欲しいのは、最初の列で、foreachバインディングの実行中にMedication計算メソッドを起動させることです。私が正しく呼んでいない行は次のとおりです。

<td><span data-bind="text: $root.Medication.DisplayName"></span></td>

FireBugsコンソールに表示されるエラーメッセージは次のとおりです。

エラー:バインディングを解析できません。メッセージ:TypeError:$root.Medicationは未定義です。バインディング値:テキスト:$ root.Medication.DisplayName

Medicationプロパティに伝播し、そのメソッドを適切にトリガーするにはどうすればよいですか?

ありがとう!

編集:

<td><span data-bind="text: $root.Medication.DisplayName"></span></td>

への変更:

<td data-bind="text: Medication.DisplayName"></td>

また、関数内にアラートを追加しましたが、トリガーされません。

function Medication(data) {
        var self = this;

        self.Name = data.Name;
        self.Code = data.Code;
        self.BrandName = data.BrandName;
        self.GenericName = data.GenericName;
        self.UnitOrMeasure = data.UnitOrMeasure;
        self.Dosages = data.Dosages;
        self.MedicationTypes = data.MedicationTypes;
        self.AllowedDiagnoses = data.AllowedDiagnoses;

        self.DisplayName = ko.computed(function () {
            alert('Explode Please');
            if (self.Name != null && self.Name != "") {
                return self.Name;
            } else {
                return self.BrandName;
            }
        });
    }

現在の結果はエラーを生成せず、このテーブルの結果は次のとおりです。

上記のEDIT変更の結果

4

2 に答える 2

2

$rootforeachバインディングのコンテキストをページ ビューモデルに変更します: ServiceItemsViewModel. デフォルトでは、 内のコンテキストforeachServiceItem. ServiceItemはコンテキストであり、 を含むビューモデルであるためMedication、 の正しいバインディングspanは次のとおりです。<span data-bind="text: Medication.DisplayName"></span>

http://knockoutjs.com/documentation/foreach-binding.html

次の行も修正する self.Medication = ko.observable(data.Medication); 必要があります。self.Medication = ko.observable(new Medication(data.Medication));

オブザーバブルである必要さえあるとは思えませんが、ページの残りの動作を知らずに確信は持てません。

バインディングの提案<td>次のように直接 バインドします。<td data-bind="text: Medication.DisplayName"/>

http://jsfiddle.net/5emCS/1/

于 2013-03-14T20:30:33.447 に答える
1

気にしないで、私は自分の問題を理解しました。$root を使用して、アイテムのチェーンをはるかに下回っていました。ありがとう

于 2013-03-14T20:07:26.577 に答える