0

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 モデル クラス:

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

});

4

1 に答える 1

0

データやビュー モデルを表示できない場合は、値を IsSelected に設定することをお勧めします。そうすれば、値が何であるかを確認できます。それが正しいように見える場合は、別の問題がありますが、値が最初に間違っていても驚かないでしょう。これは、データをビュー モデルにマッピングする方法が原因である可能性がありますが、私にはわかりません。

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

ここでコードでマッピングプラグインを2回使用している理由について混乱しています.1回は初期データでmvcModelを生成し、もう1回はマッピングします.myViewModelをmvcModelにマッピングしているようです. 間違っているように見えるので、そのようにするつもりでしたか?

applyBindings を実行する前にデバッガーを見てg、それがどのように見えるかを調査しましたか?

于 2013-03-11T16:48:03.567 に答える