子JSON對象未定義時，它不是

Question

我有一個JSON對象的數組中的所有工作，除了一個子對象（類別）。

這裏是CSHTML代碼：

 <script type="text/javascript"> 
var initialData = @Html.Raw(Json.Encode(ViewBag.OfferItems)); 
</script> 

這裏是生成的頁面源：

 <script type="text/javascript"> 
var initialData = [{"Id":1,"Name":"Item1","ProductVariantLinks":[{"category":{"Id":2,"Name":"Basic Pizza","Products":null},"product":{"Id":1,"Name":"Margherita","Description":null,"ProductVariants":null},"productVariant":{"Id":1,"Name":"10 inch"}},{"category":{"Id":2,"Name":"Basic Pizza","Products":null},"product":{"Id":2,"Name":"Zeno","Description":null,"ProductVariants":null},"productVariant":{"Id":4,"Name":"8 inch"}}]},{"Id":2,"Name":"Item2","ProductVariantLinks":[]}]; 
</script> 

至於我可以告訴類是存在的，所包含的屬性，但它顯示爲未定義在IE的調試器中。

有我丟失的東西？

P.S. JSON是有效的。

更新

我使用knockoutjs和類別是inialdata直到它ko.applybindings。我不知道爲什麼它會這樣做，代碼如下：

/// <reference path="jquery-1.5.1.js" /> 
/// <reference path="knockout-2.0.0.js" /> 
var ProductVariantLink = function() { 
    var self = this; 
    self.category = ko.observable(); 
    self.product = ko.observable(); 
    self.productVariant = ko.observable(); 

    // Whenever the category changes, reset the product selection 
    self.category.subscribe(function() { 
     self.product(undefined); 
     self.productVariant(undefined); 
    }); 
}; 

var OfferItem = function() { 
    var self = this; 
    self.Name = new String(); 
    self.ProductVariants = new Array(); 
}; 

var SpecialOfferItemModel = function (specialOfferItems) { 
    var self = this; 
    self.specialOfferItems = ko.observableArray(ko.utils.arrayMap(specialOfferItems, function (specialOfferItem) { 
     return { Id: specialOfferItem.Id, Name: specialOfferItem.Name, ProductVariants: ko.observableArray(specialOfferItem.ProductVariantLinks) }; 
    })); 

    self.addSpecialOfferItem = function() { 
     self.specialOfferItems.push({ 
      Id: "", 
      Name: "", 
      ProductVariants: ko.observableArray() 
     }); 
    }; 

    self.removeSpecialOfferItem = function (specialOfferItem) { 
     self.specialOfferItems.remove(specialOfferItem); 
    }; 

    self.addProductVariant = function (specialOfferItem) { 
     specialOfferItem.ProductVariants.push(new ProductVariantLink()); 
    }; 

    self.removeProductVariant = function (ProductVariant) { 
     $.each(self.specialOfferItems(), function() { this.ProductVariants.remove(ProductVariant) }) 
    }; 

    self.save = function() { 
     var OfferItems = new Array(); 
     $.each(self.specialOfferItems(), 
       function() { 
        var item = this; 
        var offer = new OfferItem(); 
        offer.Name = item.Name; 
        $.each(item.ProductVariants(), 
        function() { 
         offer.ProductVariants.push(this.ProductVariant); 
        }); 
        OfferItems.push(offer); 
       }); 
       self.lastSavedJson(JSON.stringify(ko.toJS(self.specialOfferItems()), null, 2)); 
     return false; 
    }; 

    self.lastSavedJson = ko.observable(""); 
}; 
var model = new SpecialOfferItemModel(initialData); 
ko.applyBindings(model); 
$(function() { 
    $('#myForm').submit(function() { 
     model.save(); 
    }); 
}); 



<table class="specialOfferItemsEditor"> 
     <tr> 
      <th> 
      </th> 
      <th> 
       Name 
      </th> 
      <th> 
       ProductVariants 
      </th> 
     </tr> 
     <tbody data-bind="foreach: specialOfferItems"> 
      <tr> 
       <td> 
        <div> 
         <a href="#" data-bind="click: $root.removeSpecialOfferItem">Delete</a></div> 
       </td> 
       <td> 
        <input data-bind="value: Name" /> 
       </td> 
       <td> 
        <table> 
         <tr> 
          <th> 
           Category 
          </th> 
          <th> 
           Product 
          </th> 
          <th> 
           ProductVariant 
          </th> 
         </tr> 
         <tbody data-bind="foreach: ProductVariants"> 
          <tr> 
           <td> 
            <select data-bind='options: ProductCategories, optionsText: "Name", optionsCaption: "Select...", value: category, uniqueName: true'> 
            </select> 
           </td> 
           <td data-bind="with: category"> 
            <select data-bind='options: Products, optionsText: "Name", optionsCaption: "Select...", value: $parent.product, uniqueName: true' > 
            </select> 
           </td> 
           <td data-bind="with: product"> 
            <select data-bind='options: ProductVariants, optionsText: "Name", optionsCaption: "Select...", value: $parent.ProductVariant, uniqueName: true' 
             > 
            </select> 
           </td> 
           <td> 
            <a href='#' data-bind='click: $root.removeProductVariant'>Delete</a> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
        <a href='#' data-bind='click: $root.addProductVariant'>Add Product Variant</a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

Answer 1

JSON沒有像你期待的那樣進來。我分配了上面提供的JSON字符串，並且我的IE調試器能夠在沒有任何問題的情況下找到'category'。

截圖：https://i.stack.imgur.com/cI60U.jpg

嘗試console.log（或alert）JSON.stringify(initialData);