Methods for calling js in fastadmin

If you want to understand how js is called in fastadmin, you should first understand RequireJs.

RequireJs is a modular tool. Each of our own js files or libraries can be regarded as a module and introduced on demand. The writing method is as follows:

<script data-main="js/main" src="js/"></script>

src is to introduce the requirejs framework file, and data-main is the total entrance to our own js. The js file corresponding to js/main is js/ (can be named by yourself)

When we write projects, we will definitely use some js and js library. So how does RequireJs reference? Let me introduce it below.

Introducing third-party libraries:

({
paths: {
'lang': "empty:",
'form': 'require-form',
'table': 'require-table',
'upload': 'require-upload',
'validator': 'require-validator',
'drag': '',
'drop': '',
'echarts': '',
'echarts-theme': 'echarts-theme',
'jquery': '../libs/jquery/dist/',
},
// Shim dependency configurationshim: {
'addons': ['backend'],
'bootstrap': ['jquery'],
'bootstrap-table': {
deps: [
'bootstrap',
// 'css!../libs/bootstrap-table/dist/'
],
exports: '$.'
},
'bootstrap-table-lang': {
deps: ['bootstrap-table'],
exports: '$.'
},
},
map: {
'*': {
'css': '../libs/require-css/'
}
},
waitSeconds: 30,
charset: 'utf-8' // File encoding});

In config, paths are used to configure libraries and js files that support AMD specifications, and shim is used to match js that support AMD specifications. After matching, assuming that you want to use jquery and bootstrap now, just use the require method:

require(['jquery', 'bootstrap'], function ($, undefined) {
 //This function will be executed after the introduction of jquery and bootstrap is completed.});

To use the js we define ourselves, we must first write our js in a modular way and define a module using define:

define('modelname',['jquery','xxx'], function ($,xxx) {
 var hehe = {
  function1: function () {
  },
  function2: function () {
  },
  function3: function () {
  }
 };
 return hehe;
});

define has three parameters. The first is the module name (can not be written, and the default is the same as the module name and file name), the second is other modules that the current module depends on, and the third is a function, the module body, which requires that a data must be returned.

PS: Let's take a look at the principle of running js in Fastadmin

Take as an example, let’s explain the operating principle of the js binding event in fastadmin.

The first line defines the referenced component

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
add: function () {
  ();
},

This code represents the bindevent function that calls the API object. The function definition is as follows:

bindevent: function () {
 $(document).on("change", "#c-type", function () {
  $("#c-pid option[data-type='all']").prop("selected", true);
  $("#c-pid option").removeClass("hide");
  $("#c-pid option[data-type!='" + $(this).val() + "'][data-type!='all']").addClass("hide");
  $("#c-pid").selectpicker("refresh");
 });    
 ($("form[role=form]"));
}

The first part of the function is the event that binds the category changes.

The second part is the binding form time.

The code for binding the form is in the /public/assets/js/ file.

The Form object is defined here, where we can see the events event.

It contains validator, mainly for client verification. Having this means that form verification is automatically bound and the verification rules are customized by yourself.

selectpicker is mainly used for select drop-down selection.

In addition, there are selectpage, cxselect, citypicker, datetimepicker, plupload, faselect, and fieldlist. In addition, you can customize it yourself.

Summarize

The above is the method of calling js in fastadmin introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!