Knockoutjs绑定对象问题

我正在学习knockoutjs并遇到一些问题。我有一个返回三个Car对象列表的方法的ASP.NET MVC页面是JSON。我将它映射到HTML视图中的select，我想在选择更改时显示所选汽车的成本。问题是，一辆汽车的名字是可见的，而价格不是（'梅赛德斯 - 奔驰的成本'）。它可能是什么？提前致谢！控制器：Knockoutjs绑定对象问题

public class Car 
{ 
    public string Make { get; set; } 
    public decimal Price { get; set; } 
} 
public JsonResult GetCars() 
{ 
    List<Car> cars = new List<Car>(); 
    cars.Add(new Car { Make = "Mercedes-Benz", Price = 103000 }); 
    cars.Add(new Car { Make = "Toyota", Price = 37000 }); 
    cars.Add(new Car { Make = "Huyndai", Price = 17000 }); 
    return Json(cars, JsonRequestBehavior.AllowGet); 
}

并查看Javascript代码：

<head> 
    <script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script> 
    <script type="text/javascript" src="~/Scripts/knockout-3.0.0.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      function Car(data) { 
       this.Make = ko.observable(data.Make); 
       this.Price = ko.observable(data.Price); 
      } 

      function CarsViewModel() { 
       var self = this; 
       //Data 
       self.someOptions = ko.observableArray([]); 
       self.myOption = ko.observable(); 

       //Operations 
       self.initData = function() { 
        $.get('/Home/GetCars', function (data) { 
         var mappedCars = $.map(data, function (item) { return new Car(item) }); 
         self.someOptions(mappedCars); 
        }); 
       } 
      } 

      ko.applyBindings(new CarsViewModel()); 
     }); 

    </script> 
</head> 
<body> 
    <div> 
     <button data-bind="click: initData">Load data</button> 
     <h4>Preview</h4> 
     <p> 
      <select data-bind="options: someOptions, optionsText: 'Make', value: myOption"></select><br /> 
      A <span data-bind="text: myOption().Make"></span> costs <span data-bind="text: myOption().Price"></span>. 
     </p> 
    </div> 
</body>

来源

2013-10-31 IDeveloper

如果您检查您的浏览器的JavaScript控制台，您应该看到以下错误：

Uncaught TypeError: Unable to process binding "text: function (){return myOption().Make }" Message: Cannot read property 'Make' of undefined

你得到这个错误，因为当您的页面已加载您的myOption为空，因此它没有Make和Price属性。所以KO不能执行绑定data-bind="text: myOption().Make"，并停止处理其他绑定。

在调用initData之后，现在您在myOption中有一些东西，但data-bind="text: myOption().Make"之后的所有绑定都不再起作用。

为了解决这个问题有喜欢的多种方式：

在myOption使用默认值
您在您的绑定空与data-bind="text: myOption() && myOption().Make"
或使用with binding

这里是with绑定的示例：

<!-- ko with: myOption --> 
    A <span data-bind="text: Make"></span> 
    costs <span data-bind="text: Price"></span>. 
<!-- /ko -->

演示JSFiddle。

来源

2013-10-31 07:33:30 nemesv

谢谢你的解释！ – IDeveloper

Knockoutjs绑定对象问题

回答

相关问题