gpt4 book ai didi

c# - Knockoutjs 绑定(bind)对象问题

转载 作者:数据小太阳 更新时间:2023-10-29 05:00:14 25 4
gpt4 key购买 nike

我正在研究 knockoutjs 并遇到一些问题。我有一个 ASP.NET MVC 页面,其中一个方法返回三个 Car 对象的列表是 JSON。我将它映射到 HTML View 中的 select 并且我想在选择更改时显示所选汽车的成本。问题是汽车的名称是可见的,而价格是不可见的('Mercedes-Benz costs .')。它可能是什么?提前致谢! Controller :

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 控制台,您应该会看到以下错误:

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

你得到这个错误是因为当你的页面加载时你的 myOption 是空的,所以它没有 MakePrice 属性。因此 KO 无法执行绑定(bind) data-bind="text: myOption().Make" 并且它会随着进一步绑定(bind)的处理而停止。

在调用 initData 之后,现在您在 myOption 中有了一些东西,但仍然是 data-bind="text: myOption().Make"< 之后的所有绑定(bind) 将不再有效。

要解决这个问题,有多种方法,例如:

  • 在 myOption 中使用默认值
  • 使用 data-bind="text: myOption() && myOption().Make"
  • 检查绑定(bind)中的 null
  • 或使用 with binding

下面是 with 绑定(bind)的例子:

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

演示 JSFiddle .

关于c# - Knockoutjs 绑定(bind)对象问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19699693/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com