Knockout.js提供了错误的$ root

时间:2014-02-13 04:33:16

标签: javascript knockout.js

我定义了以下knockout.js视图模型:

    function EoiLineItemViewModel(data) {
        var self = this;
        self.LineID = ko.observable(data.LineID);
        self.QuoteID = ko.observable(data.QuoteID);
        self.Quantity = ko.observable(data.Quantity);
        self.UnitPriceExTax = ko.observable(data.UnitPriceExTax);
        self.UnitPriceTaxRate = ko.observable(data.UnitPriceTaxRate);
        self.UnitPriceTaxAmt = ko.observable(data.UnitPriceTaxAmt);
        self.UnitPriceTaxInc = ko.observable(data.UnitPriceTaxInc);
        self.LineTotalExTax = ko.computed(function() {
            return self.Quantity() * self.UnitPriceExTax();
        });
        self.LineTotalTaxAmt = ko.computed(function() {
            return (self.LineTotalExTax() * (1 + (self.UnitPriceTaxRate() / 100))) - self.LineTotalExTax();
        });
        self.LineTotalIncTax = ko.computed(function() {
            return self.LineTotalExTax() + self.LineTotalTaxAmt();
        });
        self.ClientState = ko.observable(data.ClientState);
    }

    function EoiViewModel() {
        var self = this;

        self.QuoteID = ko.observable();
        self.LineItems = ko.observableArray([]);
        self.CurrencyID = ko.observable();
        self.SupplierRef = ko.observable();

        self.DeliveryDate = ko.observable();
        self.QuoteAvailablityStartDate = ko.observable();
        self.QuoteAvailablityEndDate = ko.observable();

        self.OpeningComments = ko.observable();
        self.PricingComments = ko.observable();
        self.DeliveryComments = ko.observable();
        self.TermsComments = ko.observable();
}

    var items = JSON.parse('@Html.Raw(Model.LineItemsAsJson)');
    var mappedItems = $.map(items, function(item) { return new EoiLineItemViewModel(item); });
    var vm = new EoiViewModel();
    vm.LineItems(mappedItems);
    console.log(vm);
    ko.applyBindings(vm);
</script>

以下html:

@using (Html.BeginForm("SaveQuoteDraft", "Supplier"))
{
    @Html.AntiForgeryToken()

    <textarea name="EoiDraftModel" data-bind="value: ko.toJSON($root)" class="may-frm-textarea"></textarea>
    <div style="margin-top: 50px; margin-bottom: 100px; text-align: right;">
        <p>
            @Html.LocalisedActionLink("Cancel", "Browse", "Many")
            <input type="submit" value="Save" class="btn btn-primary btn-large btn-success" />
        </p>
    </div>
}

id不明白为什么textarea只包含:

{"LineItems":[{"LineID":1,"QuoteID":"00000000-0000-0000-0000-000000000000","Quantity":0,"UnitPriceExTax":0,"UnitPriceTaxRate":0,"UnitPriceTaxAmt":0,"LineTotalExTax":0,"LineTotalTaxAmt":0,"LineTotalIncTax":0}],"FreightExTax":0,"FreightExTax2":0,"FreightTaxRate":0,"FreightTaxAmt":0,"FreightIncTax":0,"TotalLinesExTax":0,"TotalLinesTaxAmt":0,"TotalExTax":0,"TotalTaxAmt":0,"TotalIncTax":0}

为什么

$root = self.LineItems 

我希望整个EoiViewModel()列出/序列化不仅仅是LineItems的单一属性? $ data也是如此。这是怎么回事?

1 个答案:

答案 0 :(得分:0)

O.k所以它因为我是个屁股。 $ root IS正如我所期望的那样绑定到vm,但因为属性没有值,所以它们不会出现在ko.toJSON($ root)中。

ko.toJSON($ root)仅显示具有实际值的属性。我想让任何有效载荷都变小......但我没有知道。

如果我这样做:

   self.OpeningComments = ko.observable("");
            self.PricingComments = ko.observable("");
            self.DeliveryComments = ko.observable("");
            self.TermsComments = ko.observable("");

他们出现了。杜!