0

所以，你好！我一直在尝试使用 Knockout.js 制作一个简单的简单功能，但没有成功。一直在浏览论坛和帖子，但仍然没有运气！

所以我想做的是用来自 ObservableArrays 的信息填充几个下拉框。这是我到目前为止的代码。但除了 HTML 代码外，什么都看不到。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script src="Scripts/knockout-2.3.0.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        function location(name, id) {
            var self = this;

            self.Name = name;
            self.Id = id;
        }

        function attraction(name, price) {
            var self = this;

            self.Name = name;
            self.Price = price;
        }

        function transportation(name, price) {
            var self = this;

            self.Name = name;
            self.Price = price;
        }

        function BookingViewModel() {
            var self = this;

            self.currentLocation = ko.observableArray([
                new location("Istanbul", "0"),
                new location("Ankara", "1"),
                new location("Izmir", "2")
            ]);
            self.selectedLocation = ko.observable();

            self.targetAttraction = ko.observableArray([
                new attraction("Aspendos Theatre", "200"),
                new attraction("Library of Celsus", "150"),
                new attraction("Hagia Sophia", "140")
            ]);
            self.selectedAttraction = ko.observable();

            self.transportationMode = ko.observableArray([
                new transportation("Walk", "0"),
                new transportation("Bus", "50"),
                new transportation("Train", "75")
            ]);
            self.selectedTransportation = ko.observable();
        }
        ko.applyBindings(new BookingViewModel());
    });
</script>
</head>
<body>
<div id="main-content">
    <div id="main-search-content">
        From: <select data-bind="
            options: currentLocation,
            optionsText: 'name',
            optionsValue: 'name',
            optionsCaptation: 'Select....'
        "></select>
        To: <select data-bind="
            options: targetAttraction,
            optionsText: 'name',
            optionsValue: 'price',
            optionsCaptation: 'Select....'
        "></select>
        How: <select data-bind="
            options: transportationMode,
            optionsText: 'name',
            optionsValue: 'price',
            optionsCaptation: 'Select....'
        "></select>
    </div>

</div>

正如您可能已经猜到的那样，我对 javascript 很陌生，但我尽我所能去尝试和学习。我已经完成了网站上的所有教程，但到目前为止，它还没有帮助我找到解决方案。会给予任何帮助或提示。

此致，

4

1 回答 1

1

optionsText and optionsValue values are case sensitive, so you need 'Name', not 'name'.

Here's a fiddle of this working as it should.

于 2013-09-10T11:52:26.407 回答