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'>&nbsp;</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'>&nbsp;</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.