[英]Knockout.js: Combining javascript objects and select options
在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>
从概念上讲,你的代码很好,但是你的fTotalPrice函数中有一些错误:当sSelectedCourse未初始化时(因为它是在页面加载时),它没有考虑到,并且iSessionCount是一个函数,所以它需要为你执行计算工作。 一个应该工作的例子(未经测试):
this.fTotalPrice = ko.computed(function() {
var selectedCourse = this.sSelectedCourse();
return (selectedCourse ? selectedCourse.price : 0) * this.iSessionCount();
},
this);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.