C# Knockoutjs绑定对象问题_C#_Javascript_Jquery_Asp.net Mvc 4_Knockout.js

C# Knockoutjs绑定对象问题

c# javascript jquery asp.net-mvc-4 knockout.js

C# Knockoutjs绑定对象问题,c#,javascript,jquery,asp.net-mvc-4,knockout.js,C#,Javascript,Jquery,Asp.net Mvc 4,Knockout.js,我正在研究击倒JS，有一些问题。我有一个ASP.NETMVC页面，其中返回三个Car对象列表的方法是JSON。然后我将其映射到HTML视图中的select，并希望在选择更改时显示所选汽车的成本。问题是，一辆车的名字是可见的，而价格是不可见的（“一辆梅赛德斯-奔驰的成本”）。可能是什么？提前谢谢！控制器： public class Car { public string Make { get; set; } public decimal Price { get; set; } }

我正在研究击倒JS，有一些问题。我有一个ASP.NETMVC页面，其中返回三个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);
}

公车
{
公共字符串Make{get；set；}
公共十进制价格{get；set；}
}
公共JsonResult GetCars（）
{
列出车辆=新列表（）；
添加（新车{Make=“Mercedes-Benz”，价格=103000}）；
添加（新车{Make=“Toyota”，价格=37000}）；
添加（新车{Make=“Huyndai”，价格=17000}）；
返回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>


$（文档）.ready（函数（）{
功能车（数据）{
this.Make=ko.observable（data.Make）；
此.Price=ko.可观察（data.Price）；
}
函数CarsViewModel（）{
var self=这个；
//资料
self.someOptions=ko.observearray（[]）；
self.myOption=ko.observable（）；
//操作
self.initData=函数（）{
$.get（'/Home/GetCars'，函数（数据）{
var mappedCars=$.map（数据，函数（项）{返回新车（项）}）；
self.someOptions（mappedCars）；
});
}
}
应用绑定（新的CarsViewModel（））；
});
加载数据
预览



A费用。

如果检查浏览器的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（）”检查绑定中是否存在null。使“
或者使用

以下是带有

绑定的

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


A.
成本。

演示。
谢谢您的解释！