Knockoutjs list in a list select binding - list

Question

I have seen so many example of this problem but not as a list. Here's my code:
<div>
<form>
<p>You have asked for <span data-bind='text: gifts().length'> </span> gift(s)</p>
<input id='giftname' type='text'/><button data-bind='click: createGift'>Add Gift</button>
<table>
<thead>
<tr>
<th>Gift name</th>
<th>Pack</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td><input data-bind='value: name' readonly='readonly'/></td>
<td><select data-bind="options: packs,
optionsText: 'pack',
value: price" /></td>
<td><input data-bind="value: price ? price.packprice : 'unknown'" readonly="readonly"/></td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>
</div>
<script type="text/javascript">
var GiftModel = function(gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.addGift = function(gift) {
var newGift = {
name: gift.name,
packs: gift.packs,
price: gift.price
};
self.gifts.push(newGift);
};
self.removeGift = function(gift) {
self.gifts.remove(gift);
};
self.createGift = function() {
var gname = $('#giftname').val();
//should be getting gift options from webservice
var newGift = {name: gname,
packs: [{pack:'Each', packprice: '2'}, {pack:'Dozen', packprice: '12'}], price: {pack:'', packprice: ''}};
self.addGift(newGift);
$('#giftname').val('');
};
};
var viewModel = new GiftModel([]);
ko.applyBindings(viewModel);
</script>
When I add gifts, it creates options of packs. Each pack has a certain price. My problem is just simple. How will I show the price on the next column for the selected pack of the gift line? Sorry im just new to knockoutjs. Thanks!

Answer 1

System will automatically update price after selecting package if you make it observable. I made a little refactoring to you code, now it works:
<div>
<form>
<p>You have asked for <span data-bind='text: gifts().length'> </span> gift(s)</p>
<input
id='giftname' type='text' data-bind='value: giftName' />
<button data-bind='click: createGift'>Add Gift</button>
<table>
<thead>
<tr>
<th>Gift name</th>
<th>Pack</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td>
<input data-bind='value: name' readonly='readonly' />
</td>
<td>
<select data-bind="options: packs,
optionsText: 'pack',
optionsValue: 'packprice',
value: price" />
</td>
<td>
<input data-bind="value: price() || 'unknown'" readonly="readonly"
/>
</td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a>
</td>
</tr>
</tbody>
</table>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>
</div>
function GiftModel(name) {
var self = this;
self.name = ko.observable(name);
self.price = ko.observable();
self.packs = ko.observable([{
pack: 'Each',
packprice: '2'
}, {
pack: 'Dozen',
packprice: '12'
}]);
}
var ViewModel = function (gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.giftName = ko.observable();
self.removeGift = function (gift) {
self.gifts.remove(gift);
};
self.createGift = function () {
self.gifts.push(new GiftModel(self.giftName()));
};
};
var viewModel = new ViewModel([]);
ko.applyBindings(viewModel);
Here is working fiddle: http://jsfiddle.net/vyshniakov/pzJaH/
P.S. Don't use jQuery to get field value if you using knockout. It is much easier to do this with knockout.