Knockout.js: Combining javascript objects and select options

Question

In knockoutjs, I want to implement the following: The user can select one of the predefined courses and enter the amount of sessions. The system then displays the total price (amount of sessions multiplied by the price per session for the selected course). I'm still new to knockoutjs so I'm still trying to figure out a lot of things.

So in my program I tried binding an array of javascript objects to select options, but I couldn't find any way to receive the selected object. How can I make the code below work as described? Thanks.

<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

Conceptually your code is fine, but you have some bugs in your fTotalPrice function: It does not take in account when sSelectedCourse is uninitialized (as it is when the page loads), and iSessionCount is a function, so it needs to be executed for your calculation to work. An example that should work (not tested):

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

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