javascript - How should I invoke Spin.js in AMD mode by using TypeScript? -


i have implement loading effect using spin.js. below code:

/// <amd-dependency path="spin" /> export class spinnerutil {     private target: htmlelement;     private spinner: spinner;      public constructor(target: htmlelement) {         this.target = target;     }      public spin() {         var target = this.target;         if (target.childelementcount == 0) {             this.spinner = new spinner().spin(target);         }     }      public stop() {         this.spinner.stop();         $(this.target).empty();     } } 

i invoked in typescript file this:

initialization:

require.config({ baseurl: 'javascripts', paths: {     'jquery': '../libraries/jquery/jquery-2.1.0',     'spin': '../libraries/spin/spin-1.3.3' }, 

invoking:

import sp = require('utilities/spin');  var spinnerid = 'spinnerview' + this.viewid; this.$el.find('#spinnerview').attr('id', spinnerid); var target: htmlelement = document.getelementbyid(spinnerid); this.spinner = new sp.spinnerutil(target); this.spinner.spin(); 

when ran application in browser, threw error below:

uncaught referenceerror: spinner not defined.

enter image description here

enter image description here

enter image description here

(spin.js has been loaded in context, spinner instance still can't initialized.)

what should fix this?


hi,here's simple testing code:

/// <reference path="../typing/require.d.ts" />  require.config({     baseurl: '../',     paths: {         'jquery': '../libraries/jquery-2.1.0',         'spin': '../libraries/spin-1.3.3'     },     shim: {         jquery: {             exports: '$'         },         spin: {             exports: '$'         }     } });   //require(['jquery','spin'], ($,spinner) => {     $(function () {         new spinner().spin($('#content')[0]);     }); //}); 

it works well, if remove line 'require(['jquery','spin'], ($,spinner) => {', throw compile error"could not find symbol 'spinner'", how use spinner without 'require' statement? should import something?

the issue here in spin.js library importing. library needs attach spin() function jquery ($) - function spin() available jquery object.
need shim in require.config follows:

require.config({ baseurl: 'javascripts', paths: {     'jquery': '../libraries/jquery/jquery-2.1.0',     'spin': '../libraries/spin/spin-1.3.3' }, shim: { spin: {             exports: '$'         } } 

this extend jquery library functions include spin library functions.
hope helps.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -