Question

我一直在尝试不同的方式来完成以下任务，用户可以在其中添加一个包含酒店集合/数组的Proposal。（不使用arraymap或“with：”databind）

function Proposal() {
    var self = this;
    self.details = ko.observable("");
    self.makmazarat = ko.observable("");
    self.medmazarat = ko.observable("");
    self.fee = ko.observable("");
    self.hotelproposal = ko.observableArray([]);

    self.addhotel = function (hotel) {
        self.hotelproposal.push({
            hotelname: "",
            checkin: "",
            checkout: "",
            roomtype: "",
            viewtype: ""
        });
    }
}

function hotel() {
    this.hotelname = ko.observable();
    this.checkin = ko.observable();
    this.checkout = ko.observable();
    this.roomtype = ko.observable();
    this.viewtype = ko.observable();
}



ko.applyBindings(new Proposal());

这是我的HTML：

   <h2>Contacts</h2>

<div>
    <table>
        <tr>
            <th>Details</th>
            <th>fee</th>
            <th>MakMazarat</th>
            <th>MedMazarat</th>
            <th>Hotels</th>
        </tr>
        <tbody>
            <tr>
                <td>
                    <input data-bind='value: details' />
                </td>
                <td>
                    <input data-bind='value: makmazarat' />
                </td>
                <td>
                    <input data-bind='value: medmazarat' />
                </td>
                <td>
                    <input data-bind='value: fee' />
                </td>
                <td>
                    <table>
                        <tbody data-bind="foreach: $root.hotelproposal">
                            <tr>
                                <td>
                                    <input data-bind='value: hotelname' />
                                </td>
                                <td>
                                    <input data-bind='value: checkin' />
                                </td>
                                <td>
                                    <input data-bind='value: checkout' />
                                </td>
                                <td>
                                    <input data-bind='value: roomtype' />
                                </td>
                                <td>
                                    <input data-bind='value: viewtype' />
                                </td>

                            </tr>
                        </tbody>
                    </table> <a href='#' data-bind='click: $root.addhotel'>Add hotel</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>

<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'></textarea>

即使在jsfiddle上我得到一个错误，但在控制台上，我得到68个错误。它说的是不使用我不理解的“提案”。什么是错误？

jsfiddle链接：https://jsfiddle.net/Lq0b2nfc/

Answer 1

你没有做的一件事就是使用你的酒店构造函数（我将它资本化，因为构造函数通常是大写的）。您还省略了一个“removePhone”功能，虽然您已从上面的代码中删除了该功能，但您已将其绑定在您的小提琴中。

function Hotel() {
  this.hotelname = ko.observable();
  this.checkin = ko.observable();
  this.checkout = ko.observable();
  this.roomtype = ko.observable();
  this.viewtype = ko.observable();
}

function Proposal() {
  var self = this;
  self.details = ko.observable("");
  self.makmazarat = ko.observable("");
  self.medmazarat = ko.observable("");
  self.fee = ko.observable("");
  self.hotelproposal = ko.observableArray([]);

  self.addhotel = function(hotel) {
    self.hotelproposal.push(new Hotel());
  }

  self.removePhone = function(hotel) {
    self.hotelproposal.remove(hotel);
  }
}


ko.applyBindings(new Proposal());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Contacts</h2>

<div id='contactsList'>
  <table class='contactsEditor'>
    <thead>
      <tr>
        <th>Details</th>
        <th>fee</th>
        <th>MakMazarat</th>
        <th>MedMazarat</th>
        <th>Hotels</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: $root.hotelproposal">
      <tr>
        <td>
          <input data-bind='value: hotelname' />
        </td>
        <td>
          <input data-bind='value: checkin' />
        </td>
        <td>
          <input data-bind='value: checkout' />
        </td>
        <td>
          <input data-bind='value: roomtype' />
        </td>
        <td>
          <input data-bind='value: viewtype' />
        </td>
        <td>
          <a href='#' data-bind='click: $root.removePhone'>Delete</a>
        </td>
      </tr>
    </tbody>
  </table>
  <a href='#' data-bind='click: $root.addhotel'>Add hotel</a>
</div>

什么导致淘汰代码中的所有这些错误？

1 个答案: