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.
(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
Post a Comment