3

我见过很多这个问题的例子，但不是一个列表。这是我的代码：

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

当我添加礼物时，它会创建包选项。每包都有一定的价格。我的问题很简单。我将如何在下一列显示所选礼品系列的价格？抱歉，我刚接触 knockoutjs。谢谢！

4

1 回答 1

1

如果您将其设为可观察，系统将在选择包裹后自动更新价格。我对您的代码进行了一些重构，现在它可以工作了：

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

这是工作小提琴：http: //jsfiddle.net/vyshniakov/pzJaH/

PS 如果您使用淘汰赛，请不要使用 jQuery 获取字段值。通过淘汰赛更容易做到这一点。

于 2013-01-14T09:06:29.260 回答