template sdk for creating templates using javascript/jquery

Question

I am trying to create an sdk in javscript/jquery for creating templates based on user input, such as the type of templates - profile template, dialog template. These templates require data from an ajax call for their creation.

User Input should include some config param and type of templates.

Since I don't have much experience creating sdk's, I am trying to create a scalable and flexible sdk which can adopt some more functionalities and properties in future.

I am stuck on the problem that what is the basic and best way to create an javascript/jquery sdk?

var dialogTemplate , var = template2 I have added sample templates. The requirement is when user passes template/templates name in tmpConfig.config.type create that particular template/templates by fetching their data simultaneously for each template/templates.Suppose, when call 'dialog template' create dialog template. when call 'dialog template' and 'template2' create both and append it. These template name can be send in array in config.

Below is what I have tried:-

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="mySDK.js"></script>
</head>
<body>
// container for templates
<div id="tmpBox"></div>

</body>
 <script type="text/javascript">
 const tmpConfig = {
  config: {
  type: ['dialog','template2',...,...,....]
   },
   boxId: '#tmpBox'
   };

   var mySDK= new tmpSDK(tmpConfig );
   mySDK.createtemplate();  // create template

</script>
 </html>

mySDK.js

function tmpSDK(confg){
   // implementation of sdk
    this.config =  confg;
  }

   tmpSDK.prototype.createtemplate= function(){ 
       var idsToAppendTemplate =  this.config.boxId;
       var templateTypes =  this.config.type;

       // checking number of templates to create
       for(var i=0 ; i < templateTypes.length; i++){
           if(templateTypes === 'dialog'){
              createDialog(idsToAppendTemplate ) 
           }else if(templateTypes === 'template2'){
              createTemplate2 (idsToAppendTemplate ) 
           }
         }       
    }       

         function getData(ajaxConfig){
         $.ajax(){
          return data;
          }
          }


 // different templates html defined below:-
var dialogTemplate = function(data){
 // play with data
  var html = '<div class='dialog-template'>MY Dialog Template</div>';
  return html;
 } 
var template2 = function(data){
  // play with data
  var html = '<div class='template2'>MY Template2</div>';
  return html;
 } 

 tmpSDK.prototype.createDialog = function(id){
 var ajaxConfig = {
    'url' : 'http://dialog endponts/',
     ....
   }
  var data =  getData(ajaxConfig);        
$(id).append(dialogTemplate(data));  // var dialogTemplate
}

tmpSDK.prototype.createTemplate2 = function(id){
 var ajaxConfig = {
    'url' : 'http://template2endponts/',
     ....
   }
 var data =  getData(ajaxConfig);
$(id).append(template2(data) );   //// var template2 
 }

score 1 · Accepted Answer · 2019-03-02 18:39:16Z

1

Please, consider to create your sdk as jQuery module with Class using.

   (function ( $ ) {
            $.fn.mySdk = function(options) {
                const element = $(this);
                const sdk = new MySdk(options, element);

                element.data('plugin-my-sdk', sdk);

                return $(this);
            };

            $.fn.getMySdk = function() {
                const element = $(this);

                return element.data('plugin-my-sdk');
            };

            class MySdk {
                constructor(options, element) {
                    this.element = element;
                    this.settings = $.extend({
                        type: 'dialog',
                    }, options );

                    this.fetchTemplate().done(this.applyTemplate.bind(this));
                }

                fetchTemplate() {
                    return $.post({
                        url: `${document.location.origin}/your-endpoint-for-getting-template`,
                        data: {
                            'id': this.element.attr('id'),
                            'type': this.settings.type
                        }
                    });
                }

                applyTemplate(template) {
                    this.element.html(template);
                }

                apiMethod() {
                    const yourElement = this.element;
                    const yourElementId = this.element.attr('id');
                    const yourType = this.settings.type;
                }
            }
        }( jQuery ));


        // This snippet - is example of using your sdk
        jQuery(function ($) {
            const element = $('#tmpBox');

            element.mySdk({
                type: 'dialog'
            });

            const sdk = element.getMySdk();

            sdk.apiMethod();

        });

What this snippet do?

Wrap jQuery function for creating a not global scope and for avoiding jQuery conflict with $ function name
Uses MySdk class for the element.
This works for the case when there is only one jquery element in collection taking by the selector. In this case - const element = $('#tmpBox'); is taking only one element.

This snippet

this.settings = this.settings = $.extend({
                    type: 'dialog',
                }, options );

merges default options with your options. If there is no option in your options object - then default option will be used

If you need to use jquery collection For example, your sdk element is $('.tmpBox') where is there are more than 1 element - please, consider to use in mySdk each function for init every element.

const elements = $(this);
element.each(function(){
    // init for every element;
})

edited Mar 2, 2019 at 18:39

answered Mar 2, 2019 at 17:54

user8554313

Sign up to request clarification or add additional context in comments.

6 Comments

Ahmad Over a year ago

Thanks, where should I add all html templates(dialog template etc) codes respectively and how should each template make ajax call for the their fetching data respectively. How to call each template ?

user8554313 Over a year ago

I have reviewed code snippet with jquery ajax example.

Ahmad Over a year ago

By ajax call , we are not getting html templates as json in response but only some data that should be used in corresponding template. By passing type of template in config when method is called like 'dialog' template then append some dynamic html templates to #tmpBox.

user8554313 Over a year ago

Please, could you provide an example of html structure of your dialog type template? And explain more detailed for understanding right what do you need to achieve.

Ahmad Over a year ago

var dialogTemplate , var = template2 I have added sample template above. The requirement is when user passes template name create that particular template/templates by fetching their data simultaneously for each template/templates.Suppose, when call 'dialog template' create dialog template. when call 'dialog template' and 'template2' create both. These template name can be send in array in config. Please review my code above. Hope it helps . This adding of templates and appending them I can't figure out.

|

Collectives™ on Stack Overflow

template sdk for creating templates using javascript/jquery

index.html

mySDK.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html

mySDK.js

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related