我正试图了解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>
这是我的HTML代码,我正在尝试将WorkOrder类绑定到:
<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>
我已经尝试过查看各种binding-contexts,但似乎没有人能做到这一点。如果我在WorkOrderViewModel中设置(例如)self.DistrictCode,我可以让它工作,但这不是我想要做的。
我错过了一些非常明显的东西吗?
编辑:我有点接近,如果我加入WorkOrderViewModel,它会绑定。在Ajax调用之后仍然不会更新......
var DummyWorkOrder = { DistrictCode: "XXX", WorkOrderNumber: "1234560", WorkOrderDescription: "My Description" };
self.WorkOrder = new WorkOrder(DummyWorkOrder);
答案 0 :(得分:1)
您是在self.Find
之前还是之后致电ko.applyBindings
?如果您之后调用它,那么这就是您的问题。
如果self.WorkOrder
只是一个对象,那么它将是单向绑定。除非您强制DOM刷新/重新绑定(并注意来自DOM的任何更新都不会反映在绑定对象中),否则对它的任何更新都不会更新DOM。如果self.WorkOrder
是可观察的,则您使用self.WorkOrder = new WorkOrder(data);
覆盖它。您需要更新observable:self.WorkOrder(new WorkOrder(data));
答案 1 :(得分:0)
DistrictCode
和WorkOrderNumber
不是ko.observable
的实例,这是实时数据绑定所必需的(基于您问题中的代码段)。尝试使用observables更新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);
}
另请注意,Artem建议的with: WorkOrder
绑定也是您的标记工作所必需的。这是因为DistrictCode
,WorkOrderNumber
和WorkOrderDescription
不会直接由WorkOrderViewModel
公开。每个的绑定路径必须通过视图模型上的WorkOrder
属性。