[英]Knockoutjs binding objects issue
我正在研究knockoutjs并遇到一些问题。 我有ASP.NET MVC页面,返回三个Car对象列表的方法是JSON。 我将其映射到HTML视图中进行select
,我想在选择更改时显示所选汽车的成本。 问题是汽车的名称是可见的而价格不是('梅赛德斯 - 奔驰的成本'。)。 可能是什么? 提前致谢! 控制器:
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>
如果您检查浏览器的JavaScript控制台,您应该会看到以下错误:
未捕获的TypeError:无法处理绑定“text:function(){return myOption()。Make}”消息:无法读取未定义的属性'Make'
您收到此错误,因为当您的页面加载时, myOption
为空,因此它没有Make
和Price
属性。 所以KO无法执行绑定data-bind="text: myOption().Make"
并且它会在处理进一步绑定时停止。
现在调用initData
之后,你在myOption
有了一些东西,但仍然是data-bind="text: myOption().Make"
之后的所有绑定data-bind="text: myOption().Make"
将不再起作用。
要解决这个问题,有多种方法可以:
data-bind="text: myOption() && myOption().Make"
检查绑定中的null 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 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.