向 SurveyJS 添加编辑器选项卡 - 无法绑定到模型

Question

我正在尝试向 SurveyJS 添加一个特定于应用程序的选项卡，该选项卡本身不受支持。到目前为止我所做的是添加一个收件人模型，例如：

import * as ko from "knockout";

export class RecipientsModel {
    public firstName: string = 'Chris';
    constructor() {}
    public show() {}
}

还有一个模板（recipients.html）：

<script type="text/html" id="recipients">
  <div class="form-item form-type-textarea form-item-bulk-accounts">
    <label class="control-label" for="edit-bulk-accounts">Email addresses <span class="form-required" title="This field is required.">*</span></label>
    <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea class="form-control form-textarea required" id="edit-bulk-accounts" name="bulk_accounts" cols="60" rows="5"></textarea><div class="grippie"></div></div>
    <div class="description">Email addresses for participants you would like to register.  Enter one per line.</div>
  </div>
  <span data-bind="text: firstName">Test</span>
</script>

我修改了 editor.ts 以便显示我的选项卡并填充内容：

this.recipient = new RecipientsModel();
...
...
...
public showManageRecipients() {
    if (!this.canSwitchViewType(null)) return;
    this.recipient.firstName = 'Chris';
    // this.showSurveyRecipients();
    this.koViewType("recipients")
}

所以，到目前为止，我有一个显示我想要的静态内容的选项卡。下一步是找出当前被破坏的绑定：

knockout-min.js:72 Uncaught ReferenceError: Unable to process binding "template: function(){return { name:'recipients'} }"
Message: Unable to process binding "text: function(){return firstName }"
Message: firstName is not defined
at text (eval at parseBindingsString (knockout-min.js:68), <anonymous>:3:57)
at update (knockout-min.js:98)
at function.a.B.i (knockout-min.js:72)
at Function.Pc (knockout-min.js:51)
at Function.Qc (knockout-min.js:51)
at Function.aa (knockout-min.js:50)
at Object.a.m.a.B (knockout-min.js:49)
at knockout-min.js:72
at Object.q (knockout-min.js:11)
at m (knockout-min.js:71)

由于这是我第一次使用 KnockoutJS 或 SurveyJS，我正在努力使这个简单的属性绑定工作。我目前正在浏览 KnockoutJS 文档，但我再次不确定这是调试的正确路径。

编辑 经过更多调试，我更新了我的模型，将firstName 设置为ko.observable：firstName = ko.observable("");。而且，在 SurveyJs 代码库中，我使用this.recipient.firstName('Chris'); 设置它。我现在可以使用：<span data-bind="text: recipient.firstName">Test</span>，这是 OK - 但我认为我应该以某种方式绑定模型，而不需要使用 recipient.firstName，我可以使用firstName。也许我错了。 结束编辑

所以，我现在的主要问题是：如何使 this.recipient.firstName 的绑定在我的模板中起作用？

Answer 1

更新：

从 1.0.69 开始，您可以通过以下代码将自定义选项卡添加到 SurveyJS Editor (Builder)：

  editor.tabs.push({
    name: "custom",
    title: "Custom Tab",
    template: "custom-template-id",
    data: {
      data: "Custom data"
    },
    action: () => {
      if (!editor.canSwitchViewType(null)) return;
      editor.koViewType("custom");
    }
  });

您还需要添加相应的模板：

  <script type="text/html" id="custom-template-id">
    <div data-bind="text: data">
    </div>
  </script>

Answer 2

您可以使用 with 绑定更改绑定上下文：

<script type="text/html" id="recipients">
  <div class="form-item form-type-textarea form-item-bulk-accounts">
    <label class="control-label" for="edit-bulk-accounts">Email addresses <span class="form-required" title="This field is required.">*</span></label>
    <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea class="form-control form-textarea required" id="edit-bulk-accounts" name="bulk_accounts" cols="60" rows="5"></textarea><div class="grippie"></div></div>
    <div class="description">Email addresses for participants you would like to register.  Enter one per line.</div>
  </div>
  <!-- ko with: recipient -->
  <span data-bind="text: firstName">Test</span>
  <!-- /ko -->
</script>