Knockoutjs 绑定对象问题

Knockoutjs binding objects issue

本文关键字：问题 对象 绑定 Knockoutjs      更新时间：2023-09-26

我正在研究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 控制台，您应该会看到以下错误：

未捕获的类型错误： 无法处理绑定"文本： 函数 （）{return myOption（）。make }"消息：无法读取属性"make" 定义

您收到此错误是因为加载页面时，myOption为空，因此它没有Make和Price属性。因此，KO无法执行绑定data-bind="text: myOption().Make"并且随着进一步绑定的处理而停止。

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

要解决此问题，有多种方法，例如：

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

下面是with绑定的示例：

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

演示 JSFiddle。

相关文章：