Question

我使用alpacajs创建了一个简单的表单，根据alpacajs.org提供的文档，我们可以使用optionsSource，schemaSource，viewSource，dataSource等属性将外部json文件加载到我们的应用程序中。但我需要的是我只需要为所有这些使用一个json文件。我的意思是，不是使用所有这3个不同的属性，我只能使用一个参数来加载来自后端的单个json文件。请检查下面的代码..

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

所以在上面的代码中我使用这些url来加载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个不同的属性，我只能使用一个属性，例如＆＃34; oneSingleJSONSource＆＃34;：＆＃34; oneJSONRemoteFile.json＆＃34;

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

Answer 1

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

告诉我你是否想了解更多有关实现这一目标的细节。我很乐意帮忙。

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

1 个答案: