Question

在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);

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

1 个答案: