Knockout.js: объединение объектов javascript и выбор опций

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