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 に答える