是什么导致了敲除代码中的所有这些错误

Whats causing all these errors in knockout code?

本文关键字:所有这些 错误 代码 是什么      更新时间:2023-09-26

我一直在尝试不同的方法来实现以下任务,用户可以添加带有酒店集合/阵列的Proposal。(不使用arraymap或"with:"数据绑定)

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/

您没有做的一件事是使用Hotel构造函数(我将其大写,因为构造函数通常是大写的)。你还省略了一个"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>

相关文章: