Добавление вкладки редактора в SurveyJS - невозможно привязать к модели - PullRequest
Новая
       36

Добавление вкладки редактора в SurveyJS - невозможно привязать к модели

0 голосов
/ 06 февраля 2019

Я экспериментирую с добавлением вкладки для конкретного приложения в SurveyJS, которая изначально не поддерживается.До сих пор я добавил модель получателей, например: 

import * as ko from "knockout";

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

и шаблон (receients.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, но, опять же, я не уверен, что это правильный путь отладки.

EDIT После дополнительной отладки я обновил свою модель, чтобы установитьfirstName до ko.observable: firstName = ko.observable("");.И в кодовой базе SurveyJs я установил его, используя this.recipient.firstName('Chris');.Теперь я могу использовать: <span data-bind="text: recipient.firstName">Test</span>, что OK - но я думаю, что я должен каким-то образом связать модель так, чтобы не требовалось recipient.firstName, и я могу просто использовать firstName.Может я не прав. END EDIT

Итак, мой главный вопрос на этом этапе: Как мне сделать привязку this.recipient.firstName в моем шаблоне?

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Обновлено:

Начиная с 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>
0 голосов
/ 07 февраля 2019

Вы можете изменить контекст привязки, используя привязку 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>
...