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

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

import * as ko from "knockout";

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

和模板（recipients.html）：

因此，我有一个选项卡，显示我想要的静态内容。下一步是找出当前已断开的绑定：

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)

knockout-min.js:72未捕获引用错误：无法处理绑定“模板：函数（）{return{name:'recipients'}”
消息：无法处理绑定“text:function（）{return firstName}”
消息：未定义firstName
在文本处（在parseBindingsString处求值（knockout-min.js:68），：3:57）
更新时（knockout-min.js:98）
at function.a.B.i（knockout-min.js:72）
在Function.Pc（knockout-min.js:51）
at Function.Qc（knockout-min.js:51）
在Function.aa（knockout-min.js:50）
在Object.a.m.a.B（knockout-min.js:49）
在淘汰赛中，得分：72
在Object.q（knockout-min.js:11）
在m处（击倒-min.js:71）

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

编辑 经过更多的调试，我更新了我的模型，将

firstName

设置为

ko.observable

：

firstName=ko.observable（“”）。在SurveyJs代码库中，我使用
this.recipient.firstName（'Chris'）设置它。我现在可以使用：
Test
，这很好-但我认为我应该以某种方式绑定模型，而不需要使用
recipient.firstName
，我可以使用
firstName
。也许我错了。
结束编辑

因此，我现在的主要问题是：如何使this.recipient.firstName的绑定在我的模板中工作？
您可以使用绑定更改绑定上下文：


电子邮件地址*
您要注册的参与者的电子邮件地址。每行输入一个。
试验
更新：
从1.0.69开始，您可以通过以下代码将自定义选项卡添加到SurveyJS编辑器（生成器）中：

  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>


可能缺少它，但不确定这是如何解决问题的。我不想添加属性编辑器，而是想添加一个选项卡，例如相邻的“测试调查”，因此在您的示例中，选项卡将是：“调查设计器”、“JSON编辑器”、“测试调查”、“我的自定义选项卡”@ChrisRockwell哦，我现在明白了。是的，这是另一项任务。如果你仍然需要解决方案，我可以在周一看一看。如果你有一个添加标签的解决方案，不涉及黑客调查JS core，我很乐意看到；然而，这不在这个问题的范围之内。谢谢@ChrisRockwell此功能自1.0.69开始实施。这是一个很棒的@TSV。看起来它还没有被标记（），所以我过几天再查。我已经添加了2个自定义选项卡，但我肯定会以这种方式更新和重做我的工作。谢谢
<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>

  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>