羊駝 - 有 onReady 表格嗎？

Question

使用 Alpaca js 我正在嘗試使用另一個 alpaca 形式的 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>

Answer 1

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);
}