");
ele.on("click", function() {
load_page(page.route, page.title);
});
$('#tech-pages').append(ele);
});
});
```
--------------------------------
### jQuery Data Loading and Template Rendering for UI
Source: https://github.com/turanar/stellaris-tech-tree/blob/master/jobs/index.html
JavaScript code using jQuery to fetch JSON data from 'jobs.json', iterate through it, render each item using a JsRender template (`#node-template`), and append the generated HTML to the `.job-tree` container. It also includes a regex replacement for custom icon placeholders.
```JavaScript
$(document).ready(function() {
$.getJSON('jobs.json', function(jsonData) {
$(jsonData).each(function(e, item) {
var tmpl = $.templates("#node-template");
var html = tmpl.render(item);
html = html.replace(new RegExp(/£(\w+)£/,'g'), '');
$(".job-tree").append(html);
})
});
});
```
--------------------------------
### Stellaris Dynamic Node HTML Template
Source: https://github.com/turanar/stellaris-tech-tree/blob/master/jobs/index.html
Provides the HTML structure for a reusable 'node' component, likely used to display game entities like jobs or technologies. It includes placeholders (`{{:name}}`, `{{:effect}}`, etc.) for data binding, suggesting a templating engine like JsRender is in use.
```HTML
{{:name}}
{{:effect}}
{{:description}}
```
--------------------------------
### HTML Template for Stellaris Tech Node Display
Source: https://github.com/turanar/stellaris-tech-tree/blob/master/index.html
A comprehensive HTML template using a templating engine (likely JsRender or similar) to display detailed information about a Stellaris tech node. It includes dynamic content for node name, tier, cost, weight, and specific empire type compatibility (gestalt, machine, hive, megacorp), along with sections for description, weight modifiers, requirements, prerequisites, and research effects.
```html
```
--------------------------------
### JavaScript Function to Load Dynamic Page Content
Source: https://github.com/turanar/stellaris-tech-tree/blob/master/index.html
Defines a JavaScript function `load_page` that dynamically updates the browser's history, sets the document title, loads a CSS file, and then loads an HTML body, subsequently injecting multiple JavaScript files. This function is central to the single-page application-like navigation, allowing different tech tree versions to be displayed without full page refreshes.
```javascript
const load_page = (param, title) => {
history.pushState({pageID: param}, param, `${param}/`);
document.title = title || param;
$('').appendTo('head').attr({
type: 'text/css',
rel: 'stylesheet',
href: '../assets/css/tech-tree.css'
});
$('body').load('../assets/html/body.html', function() {
$('
');
$(".job-tree").append(html);
})
});
});
```
--------------------------------
### Stellaris Dynamic Node HTML Template
Source: https://github.com/turanar/stellaris-tech-tree/blob/master/jobs/index.html
Provides the HTML structure for a reusable 'node' component, likely used to display game entities like jobs or technologies. It includes placeholders (`{{:name}}`, `{{:effect}}`, etc.) for data binding, suggesting a templating engine like JsRender is in use.
```HTML
{{/if}}
{{if is_gestalt === false}}
{{/if}}
{{if is_machine_empire === false}}
{{/if}}
{{if is_rogue_servitor === true}}
{{/if}}
{{/if}}
{{if is_hive_empire === true}}
{{/if}}
{{if is_hive_empire === false}}
{{/if}}
{{if is_megacorp === false}}
{{/for}}