0

我正试图了解 KnockOut 数据绑定，并且我正在努力获得一个简单的表单来绑定到我的 ViewModel。

我正在使用 WebAPI 来拉回我的 JSON 数据。

这是我的 ViewModel，一旦调用了这个“查找”方法，它就会创建一个新的 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>

我试过查看各种绑定上下文，但似乎没有一个能解决问题。如果我在 WorkOrderViewModel 中设置（例如）self.DistrictCode，我可以让它工作，但这不是我想要做的。

我错过了一些非常明显的东西吗？

编辑：我更接近一点，如果我添加到 WorkOrderViewModel 中，它会绑定。在 Ajax 调用之后仍然不会更新......

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

self.WorkOrder = new WorkOrder(DummyWorkOrder);
4

2 回答 2

1

你是self.Find在之前还是之后打电话ko.applyBindings？如果您在之后调用它，那么这就是您的问题。

如果self.WorkOrder只是一个对象，那么它将是单向绑定。除非您强制 DOM 刷新/重新绑定，否则对它的任何更新都不会更新 DOM（请注意，来自 DOM 的任何更新都不会反映在绑定对象中）。如果self.WorkOrder是一个可观察的，你用self.WorkOrder = new WorkOrder(data); 你需要更新可观察的覆盖它：self.WorkOrder(new WorkOrder(data));

于 2013-09-10T15:51:42.827 回答
0

DistrictCode并且WorkOrderNumber不是ko.observable实时数据绑定所需的实例（基于您问题中的代码段）。尝试WorkOrder使用 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);
    }

另请注意，with: WorkOrderArtem 建议的绑定也是您的标记工作所必需的。这是因为DistrictCode,WorkOrderNumber和WorkOrderDescription不是WorkOrderViewModel直接暴露的。每个绑定路径都必须通过WorkOrder视图模型上的属性。

于 2013-09-10T15:28:22.417 回答