使用 Json 对象更新时，Alpaca setValue 不替换值

Question

Using Alpaca js I am trying to use setValue to change a field value
I have created this simple example its a single input form, that when clicking "update input" button
the input should be updated with new value, "NEW VALUE"
Any Idea why is it not working?

 $(document).ready(function(){ createForm("firstName","First Name","OLD VALUE","string"); }); function updateForm(){ alert(JSON.stringify($("#alpacaForm").alpaca().getValue(), null, " ")); $("#alpacaForm").alpaca().setValue('{"fieldName": "NEW VALUE"}'); } function createForm(fieldName,fieldLable,fieldVal,fieldType){ $("#alpacaForm").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="alpacaForm" ></div> <button onclick="updateForm()">update input</button>

Answer 1

Form.setValue should be passed an object.

 $(document).ready(function() { createForm("firstName", "First Name", "OLD VALUE", "string"); }); function updateForm() { alert(JSON.stringify($("#alpacaForm").alpaca().getValue(), null, " ")); $("#alpacaForm").alpaca().setValue({"firstName": "NEW VALUE"}); } function createForm(fieldName, fieldLable, fieldVal, fieldType) { $("#alpacaForm").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="alpacaForm"></div> <button onclick="updateForm()">update input</button>