Question

以下是服务器在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]);
    }
});

我可以看到我的表格填充了正确选中或未选中的复选框。但是，对于未选中的复选框，相应的输入不会显示为灰色（禁用）。如果我手动取消选中复选框，则输入将被禁用。

那么为什么'enable'属性在开始时没有约束？

修改

MVC Model类：

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

}）;

Answer 1

如果无法查看您的数据或视图模型，我建议将值设置为IsSelected，这样您就可以看到该值是什么。如果这看起来是正确的，那么还有一些其他问题，但如果这些值最初不正确，我也不会感到惊讶。这可能是由于您将数据映射到视图模型的方式，尽管我无从得知。

<td><input type="text" data-bind="value: IsSelected, enable: IsSelected" /></td>

我很困惑你为什么在你的代码中使用映射插件两次，一次在你的初始数据上生成mvcModel，一次映射，好吧，看起来你正在将myViewModel映射到mvcModel。你的意思是这样，因为看起来不正确吗？

在应用绑定之前，您是否在调试器中查看了g，并调查了它的外观？

敲除绑定部分工作

1 个答案: