Knockout.js：结合 javascript 对象和选择选项

Question

在 knockoutjs 中，我想实现以下功能：用户可以选择其中一门预定义的课程并输入会话数量。然后系统会显示总价格（课程数量乘以所选课程的每课程价格）。我对 knockoutjs 还很陌生，所以我仍在尝试弄清楚很多事情。

所以在我的程序中，我尝试将一组 javascript 对象绑定到选择选项，但我找不到任何方法来接收所选对象。如何使下面的代码按描述工作？谢谢。

<script type="text/javascript">
                    // <![CDATA[
                    $(function() {
                        var myViewModel = function() {
                            this.aCourses = ko.observableArray([
                                {value: 'course_1', text: 'Course 1', price: 35},
                                {value: 'course_2', text: 'Course 2', price: 39},
                                {value: 'course_3', text: 'Course 3', price: 30},
                                {value: 'course_4', text: 'Course 4', price: 43},
                            ]);
                            this.sSelectedCourse = ko.observable();
                            this.iSessionCount = ko.observable(0);
                            this.fTotalPrice = ko.computed(function() { return this.sSelectedCourse().price * this.iSessionCount; }, this);
                        };

                        ko.applyBindings(myViewModel);
                    });
                    // ]]>
                </script>

                <div class="main-column-container">
                    <form class="form-horizontal" role="form" method="post">
                      <div class="form-group">
                        <label for="cursus" class="control-label col-sm-3">Rijopleiding</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="cursus" name="cursus" data-bind="
                                options: aCourses,
                                optionsText: 'text',
                                value: sSelectedCourse,
                                optionsCaption: 'Selecteer...'">
                            </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="session_count" class="control-label col-sm-3">Amount</label>
                        <div class="col-sm-9">
                            <input class="form-control" id="session_count" name="session_count" 
                                data-bind="value: iSessionCount" />
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="price_total" class="control-label col-sm-3">Total</label>
                        <div class="col-sm-9">
                            <p class="form-control-static" data-bind="text: fTotalPrice"></p>
                        </div>
                      </div>
                    </form>
                </div>

Answer 1

从概念上讲，您的代码没问题，但是您的 fTotalPrice 函数中有一些错误：当 sSelectedCourse 未初始化时（因为它是在页面加载时），它没有考虑在内， iSessionCount 是一个函数，因此需要执行它才能使您的计算生效。一个应该工作的例子（未经测试）：

this.fTotalPrice = ko.computed(function() { 

    var selectedCourse = this.sSelectedCourse();
    return (selectedCourse ? selectedCourse.price : 0) * this.iSessionCount(); 
}, 
    this);