Альпака - Есть ли форма на ГОТОВ? - PullRequest
Новая
       18

Альпака - Есть ли форма на ГОТОВ?

0 голосов
/ 21 марта 2020

Использование альпаки js Я пытаюсь использовать setValue другой формы альпаки на лету. Я получаю 

SyntaxError: JSON.parse: unexpected end of data at line 8 column 5 of the JSON data

Я предполагаю, что это происходит, потому что форма еще не визуализирована? Есть ли способ установить функцию «onReady»?

Простой пример демонстрации сценария: 

$(document).ready(function(){
	createForm("alpacaForm1","firstName","Copy from this form","FORM1 value","string");  
});


function updateForm(){
  createForm("alpacaForm2","firstName","To this form", "FORM2 value","string");      
   $("#alpacaForm2").alpaca().setValue($("#alpacaForm1").alpaca().getValue());

}
function createForm(divName,fieldName,fieldLable,fieldVal,fieldType){

$("#" + divName).alpaca({
    "data": { fieldName: fieldVal },
    "schema": {
        "type": "object",
        "properties": {
            fieldName: {
                "type": fieldType,
                "title": fieldLable
            }
        }
    }
});

}
<!-- jquery -->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 
        <!-- bootstrap -->
        <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 
        <!-- handlebars -->
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
 
        <!-- alpaca -->
        <link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
        
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

<div id="alpacaForm1" ></div>
<div id="alpacaForm2" ></div>
<button onclick="updateForm()">create form 2 and cop from form 1 </button>

1 Ответ

1 голос
/ 22 марта 2020

postRender позволяет выполнять операции при визуализации элемента управления.

Способ использования этого обратного вызова - изменить createForm для получения функции обратного вызова postRender в качестве аргумента. и настройте его в качестве опции для формы. 

$(document).ready(function() {
  const postRender = () => {};
  createForm("alpacaForm1", "firstName", "Copy from this form", "FORM1 value", "string", postRender);
});


function updateForm() {
  const postRender = control => control.setValue($("#alpacaForm1").alpaca().getValue());
  createForm("alpacaForm2", "firstName", "To this form", "FORM2 value", "string", postRender);
}

function createForm(divName, fieldName, fieldLable, fieldVal, fieldType, postRender) {

  $("#" + divName).alpaca({
    "data": {
      fieldName: fieldVal
    },
    "schema": {
      "type": "object",
      "properties": {
        fieldName: {
          "type": fieldType,
          "title": fieldLable
        }
      }
    },
    "postRender": postRender
  });

}
<!-- jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- bootstrap -->
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- handlebars -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>

<!-- alpaca -->
<link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

<div id="alpacaForm1"></div>
<div id="alpacaForm2"></div>
<button onclick="updateForm()">create form 2 and cop from form 1 </button>

Лучший способ минимизировать манипуляции с DOM - это пересылать данные для переопределения данных второй формы в качестве аргумента в функции createForm. 

function createForm(divName, fieldName, fieldLable, fieldVal, fieldType, dataOverrides={}) {

  $("#" + divName).alpaca({
    "data": {
      fieldName: fieldVal,
      ...dataOverrides
    },
    "schema": {
      "type": "object",
      "properties": {
        fieldName: {
          "type": fieldType,
          "title": fieldLable
        }
      }
    },
  });
}

Затем передайте значения из первой формы при создании второй формы. 

function updateForm() {
  const dataOverrides = $("#alpacaForm1").alpaca().getValue();
  createForm("alpacaForm2", "firstName", "To this form", "FORM2 value", "string", dataOverrides);
}
...