quotout.js:组合JavaScript对象并选择选项

Question

在淘汰赛中，我想实现以下内容：用户可以选择一个预定义的课程并输入会话数量。然后，系统显示总价（会议的数量乘以所选课程的每个会话的价格）。我仍然是淘汰赛的新手，所以我仍在尝试找出很多事情。

因此，在我的程序中，我尝试绑定一个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);