将编辑器选项卡添加到 SurveyJS - 无法绑定到模型
Adding an editor tab to SurveyJS - not able to bind to model
我正在尝试向 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 - 但我认为我应该以某种不需要使用 [=19] 的方式绑定模型=] 并且我可以使用 firstName
。也许我错了。
结束编辑
那么,此时我的主要问题是:如何使 this.recipient.firstName 的绑定在我的模板中起作用?
您可以使用 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>
已更新:
从 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>
我正在尝试向 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 - 但我认为我应该以某种不需要使用 [=19] 的方式绑定模型=] 并且我可以使用 firstName
。也许我错了。
结束编辑
那么,此时我的主要问题是:如何使 this.recipient.firstName 的绑定在我的模板中起作用?
您可以使用 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>
已更新:
从 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>