这是服务器在 AJAX 调用时返回的 PartialView 的 HTML 代码:
<tbody data-bind="foreach: CoverQuotesViewModel">
<tr>
<td><input type="checkbox" data-bind="checked: IsSelected" /></td>
<td ><input type="text" data-bind="value: Label, enable: IsSelected" /></td>
</tr>
</tbody>
然后应用绑定:
$.ajax("getSelectedQuote", {
data: ko.toJSON({ model: self.selectedQuote, model1: formData }),
}),
type: "post", contentType: "application/json",
success: function (result) {
$("#custom").html(result);
ko.applyBindings(self.selectedQuote, $("#covers")[0]);
}
});
我可以看到我的表格填充了正确选中的复选框。但是,对于未选中的复选框,相应的输入不会灰显(禁用)。如果我手动取消选中一个复选框,输入将被禁用。
那么为什么“启用”属性在开始时没有绑定?
编辑
MVC 模型类:
public class CoverQuoteViewModel
{
public CoverQuoteViewModel()
{
Childs = new List<CoverQuoteViewModel>();
}
public string ProductName { get; set; }
public string Label { get; set; }
public bool IsVisible { get; set; }
public bool IsMandatory { get; set; }
public bool IsSelected { get; set; }
public bool IsChoice { get; set; }
public bool IsComposite { get; set; }
public decimal YearPrice { get; set; }
public decimal BiannualPrice { get; set; }
public decimal QuarterPrice { get; set; }
public decimal MonthPrice { get; set; }
public List<CoverQuoteViewModel> Childs { get; private set; }
public CoverQuoteViewModel SelectedCoverQuote { get; set; }
}
编辑
返回的 JSON 数据
var initialData = { "Quotes":
[{ "ProductName": null, "MonthPrice": 0, "QuarterPrice": 0, "BiannualPrice": 0, "YearPrice": 0, "CoverQuotesViewModel":
[{ "ProductName": null, "Label": "Première Assistance 24h/24 (GRATUITE)", "IsVisible": true, "IsMandatory": true, "IsSelected": true, "IsChoice": false, "IsComposite": false, "YearPrice": 0.97, "BiannualPrice": 0.49, "QuarterPrice": 0.25, "MonthPrice": 0.08, "Childs": [], "SelectedCoverQuote": null },
{ "ProductName": null, "Label": "Assistance PLUS 24h/24", "IsVisible": true, "IsMandatory": false, "IsSelected": false, "IsChoice": false, "IsComposite": false, "YearPrice": 36.06, "BiannualPrice": 18.22, "QuarterPrice": 9.20, "MonthPrice": 3.10, "Childs": [], "SelectedCoverQuote": null },
{ "ProductName": null, "Label": "Supplément Vol Audio", "IsVisible": true, "IsMandatory": false, "IsSelected": false, "IsChoice": false, "IsComposite": false, "YearPrice": 33.36, "BiannualPrice": 16.85, "QuarterPrice": 8.51, "MonthPrice": 2.87, "Childs": [], "SelectedCoverQuote": null }
]}]
};
数据解析如下:
<script type="text/javascript">
@{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model)); }
var initialData = @jsonData;
</script>
和完整的 ViewModel
$(function () {
var mvcModel = ko.mapping.fromJS(initialData);
function QuoteViewModel() {
var self = this;
self.customizeQuote = function (quote) {
self.selectedQuote = quote;
//remove the disable attribute on all form controls before serializing data
$(".step").each(function () {
$(this).find('input, select').removeAttr('disabled');
});
//convert form data to an object
var formData = $('#etape').toObject();
$.ajax("getSelectedQuote", {
data: ko.toJSON({ model: self.selectedQuote, model1: formData }),
type: "post", contentType: "application/json",
success: function (result) {
debugger
$("#custom").html(result);
$("#etape").formwizard("show", "customize");
ko.applyBindings(self.selectedQuote, $("#covers")[0]);
}
});
};
self.addRemove = function (cover) {
alert(cover.Label);
};
}
var myViewModel = new QuoteViewModel();
var g = ko.mapping.fromJS(myViewModel, mvcModel);
ko.applyBindings(g);
});