0

KnockOut データ バインディングについて理解しようとしていますが、ViewModel にバインドする単純なフォームを取得するのに苦労しています。

WebAPI を使用して JSON データを取得しています。

これは私の ViewModel です。この「find」メソッドが呼び出されると、新しい WorkOrder オブジェクトが作成され、いくつかのプロパティが入力されます (これをテストしたところ、これらの値が確実に設定されています)。

<script type="text/javascript">

    function WorkOrder(workOrder) {
        var self = this;

        self.DistrictCode = workOrder.DistrictCode;
        self.WorkOrderNumber = workOrder.WorkOrderNumber;
        self.WorkOrderDescription = ko.observable(workOrder.WorkOrderDescription);
    }

    var apiUrl = 'api/workorders';

    function WorkOrderViewModel() {
        var self = this;

        self.find = function() {
            var id = $('#workOrderNumber').val();
            $.getJSON(apiUrl + '/' + id)
                .done(function(data) {
                    self.WorkOrder = new WorkOrder(data);
                })
                .fail(function(jqXHR, textStatus, err) {
                    $('#workorder').text('Error: ' + err);
                });
        }
    }

    $(document).ready(function() {
        ko.applyBindings(WorkOrderViewModel());
    });

</script>

これは、WorkOrder クラスをバインドしようとしている HTML コードです。

<h2>Work Order Details</h2>
<table>
    <tr>
        <td>
            District Code:  
        </td>
        <td>
            <input data-bind="value: DistrictCode"/>
        </td>
    </tr>
    <tr>
        <td>
            Work Order Number:  
        </td>
        <td>
            <input data-bind="value: WorkOrderNumber"/>
        </td>
    </tr>
    <tr>
        <td>
            Work Order Description:  
        </td>
        <td>
            <input data-bind="value: WorkOrderDescription"/>
        </td>
    </tr>
</table>

さまざまなバインディング コンテキストを調べてみましたが、うまくいかないようです。(たとえば) self.DistrictCode を WorkOrderViewModel に設定すると動作するようになりますが、これは私がやりたいことではありません。

本当に明らかな何かが欠けていますか？

編集：WorkOrderViewModelに追加すると、バインドされます。ただし、Ajax呼び出し後も更新されません...

var DummyWorkOrder = { DistrictCode: "XXX", WorkOrderNumber: "1234560", WorkOrderDescription: "My Description" };

self.WorkOrder = new WorkOrder(DummyWorkOrder);
4

2 に答える 2

0

DistrictCodeリアルタイムのデータバインディングに必要なWorkOrderNumberインスタンスではありません（質問のコードスニペットに基づく）。オブザーバブルでコンストラクターをko.observable更新してみてください。WorkOrder

function WorkOrder(workOrder) {
        var self = this;

        self.DistrictCode = ko.observable(workOrder.DistrictCode);
        self.WorkOrderNumber = ko.observable(workOrder.WorkOrderNumber);
        self.WorkOrderDescription = ko.observable(workOrder.WorkOrderDescription);
    }

またwith: WorkOrder、マークアップが機能するには、Artem が提案するバインディングも必要になることに注意してください。これはDistrictCode、WorkOrderNumberとが直接WorkOrderDescription公開されていないためです。それぞれのバインディング パスは、ビュー モデルWorkOrderViewModelのプロパティを通過する必要があります。WorkOrder

于 2013-09-10T15:28:22.417 に答える