如何使用单个json文件在alpacajs中使用

我已经使用alpacajs创建了一个简单的表单，根据alpacajs.org提供的文档，我们可以使用诸如optionsSource，schemaSource，viewSource，dataSource等属性来加载外部json文件进入我们的应用。但我需要的是，我只需要为所有这些使用一个json文件。我的意思是，而不是使用所有这3种不同的属性，我可以只使用一个参数来加载来自后端的单个json文件。请因此，这里检查我下面的代码..如何使用单个json文件在alpacajs中使用

<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>

在上面的代码我已经使用了这些网址加载JSON数据..

"dataSource": "/fulfiller/connector-custom-data.json" 
"schemaSource": "/fulfiller/connector-custom-schema.json" 
"optionsSource": "/fulfiller/connector-custom-options.json" 
"viewSource": "/fulfiller/connector-custom-view.json"

因此，而不是使用这3个不同的属性只能用我一个属性，如“oneSingleJSONSource”：“oneJSONRemoteFile.json”

任何人都可以提供输入吗？

来源

2017-06-12 youi

对于Alpaca被初始化它必须有一个DOM元素+一个配置对象，它包含了Alpaca已经在其核心代码中已经知道的模式，选项和其他属性，所以在你的情况下，如果你尝试修改羊驼核心代码...如果您的目标只是优化资源加载，您可以只使用一个包含所有配置的json文件，并在羊驼初始化$(dom).alpaca(_json_data_from_loaded_file)中输入它们。如果你想在文件中只有模式，选项和视图设置，你应该将加载的数据分成3个对象，1个用于模式，1个用于选项，最后一个用于视图设置。

告诉我，如果你想获得更多细节实现这一点。我很乐意提供帮助。

来源

2017-06-22 08:54:24 vert3x

你能解释一下吗？ – alibenmessaoud

如何使用单个json文件在alpacajs中使用

回答

相关问题