无法在确认方法中访问可观察到的淘汰赛

Question

我有一个向用户显示的引导程序确认。单击确认后，我想访问 onCancel 方法下同一类中的可观察数组（ this.parameters() ）。尝试了几种方法但没有成功。任何帮助将不胜感激。

export class ViewModel {
    
    public parameters: KnockoutObservableArray<Parameter>

    constructor() {

        this.parameters = ko.observableArray(new Array<Parameter>());

        $('div.panel-footer button[data-toggle=confirmation]').confirmation({
            placement: 'top',
            href: '#',
            title: 'Add Parameter',
            btnOkLabel: 'Save & Resend Email',
            btnOkIcon: 'glyphicon glyphicon-envelope',
            btnOkClass: 'btn btn-sm btn-primary',
            btnCancelLabel: 'Save',
            btnCancelIcon: '',
            btnCancelClass: 'btn btn-sm btn-primary',
            onCancel: (e, target) => {
                this.parameters();
            }
        });
    }

Answer 1

我创建了一个示例，但我必须遗憾地通知您，该示例实现了您想要实现的目标，因此问题一定超出了此范围。

最初我认为这是一个

this

上下文绑定错误，但使用箭头指针应该没问题，正如您在我的

confirm

函数示例中看到的那样。但为了确定，请尝试通过手动绑定函数上下文来实现您的

onCancel

函数。也许它会起作用，你可以通过这种方式访问你的类上下文。

class ViewModel {
  constructor() {

    this.confirm = ko.observable(0);
    this.cancel = ko.observable(0);

    $('#foobar').confirmation({
      onConfirm: () => {
        this.confirm(this.confirm() + 1);
      },
      onCancel: (function () {
        this.cancel(this.cancel() + 1);
      }).bind(this)
    });
  }
}

ko.applyBindings(new ViewModel());

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-confirmation2/dist/bootstrap-confirmation.min.js"></script>
<p><button id="foobar">click here</button></p>
<p>confirm: <span data-bind="text: $root.confirm"></span></p>
<p>cancel: <span data-bind="text: $root.cancel"></span></p>