Asp.net 无法将viewmodel与敲除绑定

我试图使用knockout.js简单地将对象绑定到视图；然而， 我已经到了一个地步，我不明白正在发生什么。。。 出于某种原因，我的观点没有受到限制。在我的页面上，我有一个产品类别的下拉列表。一旦一个类别被更改，我想用属于所选类别的产品信息填充html表

下面是我正在使用的代码

HTML:

这是我的ViewModel对象：

function ProductsListViewModel (bindingData) {
    var self = this;  

    this.Products = {};

    //////////////////////////////////////////////
    // Load
    /////////////////////////////////////////////
    this.BindViewModel = function (jsonProducts) {
        var _bindingData = jsonProducts;

        if (_bindingData && ObjectTypeChecker.IsJsonObject(_bindingData)) {
            _bindingData = $.parseJSON(_bindingData);
        }

        if (_bindingData && _bindingData.d) {
            _bindingData = eval(_bindingData.d);
        }

        self.Products = _bindingData;
        ko.mapping.fromJS(self.Products, self);
    };

    this.InitialLoad = function()
    {
        var _bindingData = bindingData;

        if (_bindingData && ObjectTypeChecker.IsJsonObject(_bindingData)) {
            _bindingData = $.parseJSON(_bindingData);
        }

        if (_bindingData && _bindingData.d) {
            _bindingData = eval(_bindingData.d);
        }

        self.Products = _bindingData;

        ko.mapping.fromJS(self.Products, {});
    }

    this.InitialLoad();

    ////////////////// STATIC METHODS ////////////////////////////
    ProductsListViewModel.GetCurrentModel = function () {
        return self;
    }
};

在客户端上，在第一次加载时，我使用空值初始化viewmodel，从服务器获取对象的“元数据”，这非常好：

$(document).ready(function () {

    // Call server for metadata
    var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler",   "GetMetadata", ["Products"]);
    var jsonProducts = agent.GetMetadata();

    // Now Load initial state for viewmodel
    LoadModels();
});


// Load metadata for all viewmodels
function LoadModels() {
    var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler",  "GetMetadata", ["Products"]);
    var jsonProducts = agent.GetMetadata();

    // Load ProductListViewModel //////////////////////////////////
    myProductsViewModel = new ProductsListViewModel(jsonProducts);
    ko.applyBindings(myProductsViewModel);
    ///////////////////////////////////////////////////////////////

}

之后，每当下拉列表中的值发生变化时，我调用JQuery.ajax方法来获取产品信息，并尝试将返回的数据绑定到视图：

 // Event Handler for Categories Drpdown
 function onCategoryChange(event) {
    // get data
    var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler",  event.type, event.eventArgs);
    var jsonProducts = agent.GetProductsByCategory(event.eventArgs);

    // jsonProducts is a list of products in json format:
    // {"d":"  [{\"ProductID\":1,\"ProductName\":\"Chai\",\"SupplierID\":1,\"CategoryID \":1,\"QuantityPerU nit\":\"10 boxes x 20 bags\",\"UnitPrice\":18.0000,\"UnitsInStock\":39,\"UnitsOnOrder\":0},
//        {\"ProductID\":2,\"ProductName\":\"Chang\",\"SupplierID\":1,\"CategoryID\":1,\"QuantityPerUnit\":\"24 - 12 oz bottles\",\"UnitPrice\":19.0000,\"UnitsInStock\":17,\"UnitsOnOrder\":40}]"}

    // Re-bind view
    BindView(jsonProducts);
}


function BindView(jsonProducts) {
    ProductsListViewModel.GetCurrentModel().BindViewModel(jsonProducts);
}

请帮忙

---

这是我上一篇文章的更新。我发现以下方法很好：

var myProductsViewModel = null;

$(document).ready(function () {
    // Load all models
    LoadModels();
});

function onCategoryChange(event) {
     var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler", event.type, event.eventArgs);
     var jsonProducts = agent.GetProductsByCategory(event.eventArgs);
     BindView(jsonProducts);
}


function LoadModels() {
     var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler", "GetMetadata", ["Products"]);
     var jsonProducts = agent.GetMetadata();

     // Load ProductListViewModel //////////////////////////////////
     ///////////////////////////////////////////////////////////////
     if (jsonProducts && ObjectTypeChecker.IsJsonObject(jsonProducts)) {
        bbbData = $.parseJSON(jsonProducts);
     }

     if (bbbData && bbbData.d) {
         list = eval(bbbData.d);
     }

     this.Products = list;
     myProductsViewModel = ko.mapping.fromJS(this.Products, {});
     ko.applyBindings(myProductsViewModel);

 }

 function BindView(jsonProducts) {

      if (jsonProducts && ObjectTypeChecker.IsJsonObject(jsonProducts)) {
         zzzz = $.parseJSON(jsonProducts);
      }
      if (zzzz && zzzz.d) {
         lllll = eval(zzzz.d);
      }
      this.Products = lllll;
      ko.mapping.fromJS(this.Products, myProductsViewModel);
 }

但这不起作用：

---

不过，我仍然希望代码更细粒度，所以我喜欢使用后一种解决方案中描述的JS对象。。。因此，你知道为什么它不起作用吗

---

仍然需要帮助，请：-）

如果您正在使用KnockoutJS，并且希望在变量发生更改时更新UI，以使其可见

function ProductsListViewModel (bindingData) {
var self = this;  

this.Products = ko.observableArray();


//////////////////////////////////////////////
// Load
/////////////////////////////////////////////
this.BindViewModel = function (jsonProducts) {
    var _bindingData = jsonProducts;

    if (_bindingData && ObjectTypeChecker.IsJsonObject(_bindingData)) {
        _bindingData = $.parseJSON(_bindingData);
    }

    if (_bindingData && _bindingData.d) {
        _bindingData = eval(_bindingData.d);
    }

    self.Products(_bindingData);
    ko.mapping.fromJS(self.Products, self);
  };

---

也请看一看

感谢Marthyn的回复，我将产品的定义更改为可观察；然而，这并没有多大帮助。。。我仍然有同样的问题。。。我认为这个问题主要与javascript中对象的工作方式有关，但我不知道哪里出了问题。。。奇怪的是，如果我在InitialLoad成员和BindViewModel（ProductsListViewModel之外）中提取代码，并将其分别放入LoadModels和BindView中。然后，即使没有将产品设置为observableArray，该解决方案也可以正常工作……然后我不知道，对不起，我也是KnockoutJS的新手

var myProductsViewModel = null;

$(document).ready(function () {
    // Load all models
    LoadModels();
});

function onCategoryChange(event) {
     var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler", event.type, event.eventArgs);
     var jsonProducts = agent.GetProductsByCategory(event.eventArgs);
     BindView(jsonProducts);
}


function LoadModels() {
     var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler", "GetMetadata", ["Products"]);
     var jsonProducts = agent.GetMetadata();

     // Load ProductListViewModel //////////////////////////////////
     ///////////////////////////////////////////////////////////////
     if (jsonProducts && ObjectTypeChecker.IsJsonObject(jsonProducts)) {
        bbbData = $.parseJSON(jsonProducts);
     }

     if (bbbData && bbbData.d) {
         list = eval(bbbData.d);
     }

     this.Products = list;
     myProductsViewModel = ko.mapping.fromJS(this.Products, {});
     ko.applyBindings(myProductsViewModel);

 }

 function BindView(jsonProducts) {

      if (jsonProducts && ObjectTypeChecker.IsJsonObject(jsonProducts)) {
         zzzz = $.parseJSON(jsonProducts);
      }
      if (zzzz && zzzz.d) {
         lllll = eval(zzzz.d);
      }
      this.Products = lllll;
      ko.mapping.fromJS(this.Products, myProductsViewModel);
 }

 $(document).ready(function () {
     // Load all models
     LoadModels();
 });

 function onCategoryChange(event) {
     var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler", event.type, event.eventArgs);
    var jsonProducts = agent.GetProductsByCategory(event.eventArgs);
    BindView(jsonProducts);
 }

 function LoadModels() {
      var agent = new WtrStpJsAgent("WtrStpWireHandler", "NorthwindActionHandler", "GetMetadata", ["Products"]);
      var jsonProducts = agent.GetMetadata();

  // Load ProductListViewModel //////////////////////////////////
      myProductsViewModel = new ProductsListViewModel(jsonProducts);
      ko.applyBindings(myProductsViewModel);
 }

 function BindView(jsonProducts) {
      ProductsListViewModel.GetCurrentModel().BindViewModel(jsonProducts);        
 }

function ProductsListViewModel (bindingData) {
var self = this;  

this.Products = ko.observableArray();


//////////////////////////////////////////////
// Load
/////////////////////////////////////////////
this.BindViewModel = function (jsonProducts) {
    var _bindingData = jsonProducts;

    if (_bindingData && ObjectTypeChecker.IsJsonObject(_bindingData)) {
        _bindingData = $.parseJSON(_bindingData);
    }

    if (_bindingData && _bindingData.d) {
        _bindingData = eval(_bindingData.d);
    }

    self.Products(_bindingData);
    ko.mapping.fromJS(self.Products, self);
  };