javascript - 如何调用带有淘汰赛的javascript方法

Question

我正在使用敲除进行绑定，我遇到的问题似乎不知道如何调用 remove 方法。我有两堂课，而且含糊其辞。

class Convocation {
    constructor(sessionId, description)
    {
        var self = this;
        this.ConvocationID = ko.observable(sessionId);
        this.ConvDesc = ko.observable(description);
        this.Vagues = ko.observableArray();

    addVague(start, end) {
        this.Vagues.push(new Vague(start, end));
    }
    removeVague() {
        self.Vagues.remove(this)
    }
}

class Vague {
    constructor(start, end) {
        this.startDate = ko.observable(start);
        this.endDate = ko.observable(end);
    }
}

我使用这个 viewModel 初始化了我的淘汰赛，女巫的作品。

function ViewModel() {
    var self = this;
    this.Convocations = ko.observableArray();

    // Get information
    this.Initialize = function () {
        $.ajax({
            url: "/Convocations/GetConvocationList",
            dataType: 'json',
            //data: { id: id },
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    self.Convocations.push(new Convocation(data[i].sessionCode, data[i].desc));
                    for (var j = 0; j < data[i].vagues.length; j++) {
                        self.Convocations()[i].addVague(data[i].vagues[j].start, data[i].vagues[j].end);
                    }
                }
            }
        });
    }
}

这是我的 jquery 调用 viewModel 一旦准备好。

(function ($) {
    // we can now rely on $ within the safety of our "bodyguard" function
    $(document).ready(function () {
        var vm = new ViewModel();
        ko.applyBindings(vm);
        vm.Initialize();
    });
})(jQuery);

但是当谈到删除一个模糊的，我似乎不知道如何称呼它这是我的观点的一个片段

<tbody data-bind="foreach: Convocations">
    <tr>
        <td><Input data-bind="value: $data.ConvocationID"></td>
        <td><Input data-bind="value: $data.ConvDesc"></td>
    </tr>

    <tr>
        <td colspan="3">
            <div class="panel-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: $data.Vagues">
                    <tr>
                        <td><span type="date" data-bind="text: $data.startDate"></span></td>
                        <td><span type="date" data-bind="text: $data.endDate"></span></td>
                        <td><a href='#' data-bind='click: $parent.removeVague'>Delete</a></td>
                    </tr>
                </tbody>
            </table>

如果我将 addRemove() 转换为这样的东西，它可以工作，但我不能在一个类中定义它。

this.remove = function () {
        self.Vagues.remove(this);
    }

标签： javascriptknockout.js

Answer 1

我怀疑关于 html 绑定中的内容$data和表示可能存在一些混淆。$parent

对于像您这样的嵌套 foreach 淘汰赛绑定，通常一个好主意是为每个级别提供自己的对象名称，而不仅仅是使用$data.

就个人而言，我仍在学习围绕类等的 javascript 语法，因此可能有比我所做的更好的 javascript 方法。

var data = [{
  sessionCode: 1,
  desc: 'Convocation 1',
  vagues: [{
    start: '2020-07-01',
    end: '2020-07-30'
  }]
}, {
  sessionCode: 2,
  desc: 'Convocation 2',
  vagues: [{
    start: '2020-07-02',
    end: '2020-07-29'
  }]
}];

class Convocation {
  constructor(sessionId, description) {
    var self = this;
    self.ConvocationID = ko.observable(sessionId);
    self.ConvDesc = ko.observable(description);
    self.Vagues = ko.observableArray();

    self.addVague = function addVague(start, end) {
      self.Vagues.push(new Vague(start, end));
    }

    self.removeVague = function removeVague(item) {
      self.Vagues.remove(item);
    }
  }
}

class Vague {
  constructor(start, end) {
    this.startDate = ko.observable(start);
    this.endDate = ko.observable(end);
  }
}

function ViewModel() {
  var self = this;
  self.Convocations = ko.observableArray();
  //helper function that mimics the success function of the ajax call to allow loading data
  self.processData = function(data) {
    for (var i = 0; i < data.length; i++) {
      self.Convocations.push(new Convocation(data[i].sessionCode, data[i].desc));
      for (var j = 0; j < data[i].vagues.length; j++) {
        self.Convocations()[i].addVague(data[i].vagues[j].start, data[i].vagues[j].end);
      }
    }
  }
  // Get information
  self.Initialize = function() {
    $.ajax({
      url: "/Convocations/GetConvocationList",
      dataType: 'json',
      //data: { id: id },
      success: function(data) {
        for (var i = 0; i < data.length; i++) {
          self.Convocations.push(new Convocation(data[i].sessionCode, data[i].desc));
          for (var j = 0; j < data[i].vagues.length; j++) {
            self.Convocations()[i].addVague(data[i].vagues[j].start, data[i].vagues[j].end);
          }
        }
      }
    });
  }


}

var vm = new ViewModel();
ko.applyBindings(vm);
//vm.Initialize();
vm.processData(data);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table">
  <tbody data-bind="foreach: {data: Convocations, as: 'convocation'}">
    <tr>
      <td>
        <input data-bind="value: convocation.ConvocationID" />
      </td>
      <td>
        <input data-bind="value: convocation.ConvDesc" />
      </td>
    </tr>

    <tr>
      <td colspan="3">
        <div class="panel-body">
          <table class="table">
            <thead>
              <tr>
                <th>Start Date</th>
                <th>End Date</th>
                <th></th>
              </tr>
            </thead>
            <tbody data-bind="foreach:{data: convocation.Vagues, as: 'vague'}">
              <tr>
                <td><span type="date" data-bind="text: vague.startDate"></span></td>
                <td><span type="date" data-bind="text: vague.endDate"></span></td>
                <td><a href='#' data-bind='click: convocation.removeVague'>Delete</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
</table>