alpacajs - 使用 Json 对象更新时,Alpaca setValue 不替换值
问题描述
使用 Alpaca js 我正在尝试使用 setValue 更改字段值
我创建了这个简单的示例,它是一个单一的输入表单,当单击“更新输入”按钮
时,输入应该更新为新值,“新值”
任何想法为什么它不工作吗?
$(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>
解决方案
Form.setValue
应该传递一个对象。
$(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>
推荐阅读
- git - 在本地存储库是更新的存储库时恢复 .git 文件
- python - 没有输出的重启错误
- html - css 动态叠加
鼠标悬停不透明度 - java - 使用不同的 java jdk 版本在 IntelliJ 中导入 Gradle 项目
- php - PHP/MYSQL:获取无限数据
- html - 无法将 div 内容设置为底部
- php - 通过 2 个嵌套循环循环执行相同的查询 2 次
- bash - AWK:减变量,当变量为负数时
- javascript - Moment.js 在未来日期的情况下错误地转换日期
- dataweave - 从 ArrayList 到 Object 的 Dataweave 转换