Knockout.js数据绑定到ViewModel

Question

I'm trying to get my head around KnockOut data bindings and I'm struggling to get a simple form to bind to my ViewModel.

I'm using WebAPI to pull back my JSON data.

This is my ViewModel, once this 'find' method has been called it creates a new WorkOrder object and populates some properties (I've tested this and it's definitely setting these values).

<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>

This is my HTML code where I'm trying to bind the WorkOrder class to:

<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>

I've tried looking at the various binding-contexts but none seem to do the trick. I can get it to work if I set (for example) self.DistrictCode in WorkOrderViewModel but this isn't what I want to do.

Am I missing something really obvious?

Edit : I've got a little bit closer, if I add into WorkOrderViewModel, it binds. Still won't update after the Ajax call though...

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

self.WorkOrder = new WorkOrder(DummyWorkOrder);

Answer 1

Are you calling self.Find before or after the ko.applyBindings ? If you're calling it after, then this is your problem.

If self.WorkOrder is just an object, then it will be a one way binding. Any updates to it won't update the DOM unless you force the DOM to refresh/rebind (and note that any updates from the DOM will not be reflected in the bound object). If self.WorkOrder is an observable, you're overwriting it with self.WorkOrder = new WorkOrder(data); You need to update the observable: self.WorkOrder(new WorkOrder(data));

Answer 2

DistrictCode and WorkOrderNumber aren't instances of ko.observable which is required for real-time data-binding (based on the code snippet in your question). Try updating your WorkOrder constructor with observables:

function WorkOrder(workOrder) {
        var self = this;

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

Also note that the with: WorkOrder binding suggested by Artem would also be required for your markup to work. This is because DistrictCode , WorkOrderNumber and WorkOrderDescription aren't exposed by the WorkOrderViewModel directly. The binding path for each must go through the WorkOrder property on your view model.