Javascript 如何在alpacajs中使用单个json文件
我使用alpacajs创建了一个简单的表单,根据alpacajs.org提供的文档,我们可以使用optionSource、schemaSource、viewSource、dataSource等属性将外部json文件加载到我们的应用程序中。但我需要的是,我只需要为所有这些使用一个json文件。我的意思是,我可以只使用一个参数来加载来自后端的单个json文件,而不是使用所有这3个不同的属性。请检查我下面的代码Javascript 如何在alpacajs中使用单个json文件,javascript,alpacajs,Javascript,Alpacajs,我使用alpacajs创建了一个简单的表单,根据alpacajs.org提供的文档,我们可以使用optionSource、schemaSource、viewSource、dataSource等属性将外部json文件加载到我们的应用程序中。但我需要的是,我只需要为所有这些使用一个json文件。我的意思是,我可以只使用一个参数来加载来自后端的单个json文件,而不是使用所有这3个不同的属性。请检查我下面的代码 <html> <head> <meta char
<html>
<head>
<meta charset="UTF-8">
<title>My Little Alpaca Form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.js"></script>
<!-- typeahead.js https://github.com/twitter/typeahead.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/bloodhound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
<link href="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.css" rel="stylesheet" />
<link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="form1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").alpaca({
"dataSource": "/fulfiller/connector-custom-data.json",
"schemaSource": "/fulfiller/connector-custom-schema.json",
"optionsSource": "/fulfiller/connector-custom-options.json",
"viewSource": "/fulfiller/connector-custom-view.json",
"view": {
"parent": "bootstrap-edit",
"layout": {
"template": "threeColumnGridLayout",
"bindings": {
"requestedfor": "column-1",
"location": "column-2",
"shortdescription": "column-3",
"description": "column-3",
}
},
"templates": {
"threeColumnGridLayout": '<div class="row">' + '{{#if options.label}}<h2>{{options.label}}</h2><span></span>{{/if}}' + '{{#if options.helper}}<p>{{options.helper}}</p>{{/if}}' + '<div id="column-1" class="col-md-6"> </div>' + '<div id="column-2" class="col-md-6"> </div>' + '<div id="column-3" class="col-md-12"> </div>' + '<div class="clear"></div>' + '</div>'
}
},
"options": {
"fields": {
"requestedfor": {
"type": "text",
"id": "requestedfor",
"label": "*Requested For",
"typeahead": {
"config": {},
"datasets": {
"type": "remote",
"displayKey": "value",
"templates": {},
"source": "http://www.alpacajs.org/data/tokenfield-ajax1.json"
}
}
},
"location": {
"type": "text",
"label": "*Location"
},
"shortdescription": {
"type": "text",
"label": "Short Description"
},
"description": {
"type": "textarea",
"rows": 5,
"cols": 40,
"label": "Description"
}
},
"form": {
"attributes": {
"action": "#",
"method": "post"
},
"buttons": {
"submit": {
"value": "Submit",
"class": "btn btn-default"
}
}
}
}
});
});
</script>
</body>
</html>
因此,我不能使用这3个不同的属性,而只能使用“oneSingleJSONSource”这样的属性:“oneJSONRemoteFile.json”
有人能提供输入吗?要使Alpaca最小化,它必须有一个DOM元素+一个配置对象,其中包含Alpaca在其核心代码中已经知道的模式、选项和其他属性,因此在您的情况下,如果您尝试修改Alpaca核心代码,这是可能的。。。如果您的目标只是优化资源加载,那么您只能使用一个包含所有配置的json文件,并将它们输入到alpaca初始化
$(dom).alpaca(\u json\u data\u from\u loaded\u file)
。如果您希望在on文件中只包含模式、选项和视图设置,则应将加载的数据分成3个对象,1个用于模式,1个用于选项,最后一个用于视图设置
如果您想了解有关实现此目标的更多详细信息,请告诉我。
我很乐意帮忙。请你再解释一下好吗!
"dataSource": "/fulfiller/connector-custom-data.json"
"schemaSource": "/fulfiller/connector-custom-schema.json"
"optionsSource": "/fulfiller/connector-custom-options.json"
"viewSource": "/fulfiller/connector-custom-view.json"