Having previous experience with JSRender, JSViews, and JSObservables, I recently embarked on a new project using TypeScript. Unfortunately, I am struggling to understand how to properly utilize TypeScript in my project, especially when it comes to referencing .js, .d.ts, and .ts files.
If I could provide details about what I currently have, where it is failing, and receive some guidance from you, it would greatly help me kickstart this project!
The contents of my "scripts" folder include the following files:
~\Typings\jQuery\jQuery.d.ts
installed from the NuGet package: jquery.TypeScript.DefinitelyTyped v0.0.1
~\Typings\jsrender\jsrender.d.ts
installed from the NuGet package: jsrender.TypeScript.DefinitelyTyped v0.1.8
File: ~/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts/jquery-3.1.1.js"></script>
<script src="scripts/jsviews.js"></script>
<script src="scripts/game/game.js"></script>
<script src="scripts/game/app.js"></script>
</head>
<body>
<div id="view">
<div id="myMap"></div>
<div id="optionsTmpl"></div>
</div>
</body>
</html>
File: ~/tmpl/options.tmpl.html
<div class="optionsFrame">
<select data-link="mapType">
{^{for mapTypes}}
<option value="{{:id}}">{{:name}}</option>
{{/for}}
</select>
<input type="button" value="test">
</div>
File: app.ts
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/jsrender/jsrender.d.ts" />
class UnchartedApp {
game: UnchartedGame;
init() {
this.game = new UnchartedGame();
this.game.loadMap();
}
}
window.onload = () => {
var app = new UnchartedApp();
app.init();
};
File: game.ts
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/jsrender/jsrender.d.ts" />
class UnchartedGame {
constructor() {}
/***** Error on the $.observe() line !! *****/
loadMap() {
this.linkTemplate("options", "#optionsTmpl", this).done(function (currentGame) {
$.observe(currentGame, "*", currentGame.modelChangeHandler);
});
}
modelChangeHandler(ev, eventArgs) {
if (ev.type == "propertyChange") {
var _game: UnchartedGame = ev.currentTarget;
if (eventArgs.path == "mapType") {
try {
_game.myMap.setMapType(mapTypeNames[newValue]);
} catch (ex) {}
}
}
}
loadTemplate(tmplName: string) {
var deferredLoad = $.Deferred();
try {
var filePath: string = "../tmpl/" + tmplName + ".tmpl.html";
$.get(filePath).then(function (templateText) {
$.templates(tmplName, templateText);
deferredLoad.resolve();
})
} catch (e) {
deferredLoad.reject();
}
return deferredLoad.promise();
}
linkTemplate(tmplName: string, targetId: string, model: UnchartedGame) {
var deferredLink = $.Deferred();
try {
this.loadTemplate(tmplName).done(
function () {
$.templates[tmplName].link(targetId, model);
deferredLink.resolve(model);
});
} catch (e) {
deferredLink.reject();
}
return deferredLink.promise();
}
}
Thanks for your assistance,
Claude