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と の値は大文字と小文字が区別されるため、 ではなくoptionsValueが必要です。'Name''name'

これが本来の動作のフィドルです。

于 2013-09-10T11:52:26.407 に答える