[FRAGE] Require.js richtig verwenden

weedo · 19. Okt. 2015

Hi,

ich versuche gerade zu verstehen wie require.js funktioniert und hänge momentan etwas in der Luft. Ich hoffe einfach, dass ihr mir helfen könnt.

Ich möchte in meiner Main ein Template laden. Die funktion dafür befindet sich in der template.js. Diese Datei benötigt allerdings die funktionalität von Mustache.js. Beim laden des Templates bekomme ich nun allerdings den Fehler "Cannot read property 'parse' of undefined".

Nun habe ich natürlich etwas rumprobiert und anstelle von define() mal require() verwendet. Dort wird mir dann gesagt, dass template keine Funktion ist.

Meine Projektstruktur:

Code:

| index.html
|-bin
  |-js
  | |-main.js
  | |-template.js
  |-lib
    |-jquery-1.11.3.min.js
    |-mustache.min.js
    |-require.min.js

Inhalt der main.js

Code:

requirejs.config({
    baseUrl: './bin',
    paths: {
        template: 'js/template',
        Mustache: 'lib/mustache.min',
        jquery: 'lib/jquery-1.11.3.min'
    }
});

require(['jquery', 'template'], function($, template) {
    var temp = new template();
    temp.template = $('#myTemplate');
    temp.target = $('main');
    temp.render();
});

Inhalt der Template.js

Code:

define(['Mustache'], function(Mustache) {
    console.log(Mustache);
    var template = function() {
        var root = this;
        root.template = false;
        root.target = false;
        root.render = function() {
            var temp = root.template.html();
            Mustache.parse(temp);
            var rendered = Mustache.render(temp);
            root.target.html(rendered);
            console.log(root.target, root.template);
        };
    };
    return template;
});

Inhalt der Index:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta lang="en">
    <title>test</title>
    <script data-main="bin/js/main" type="text/javascript" src="bin/lib/require.min.js"></script>
</head>
<body>
    <main></main>
    <script id="myTemplate" type="text/html">
        <p>hello World</p>
    </script>
</body>
</html>

Ich hoffe ihr könnt mir dabei helfen. Von dem Grundverständnis hängt derzeit meine Weiterarbeit an dem Projekt ab.

- - - Aktualisiert - - -

Problematik gelöst!

Mustache ist nicht in AMD geschrieben und hat somit das Problem, dass es für RequireJS erstmal definiert werden muss.

Um es zum laufen zu bringen definert man Mustache als script in paths:

Mustache: 'js/mustache'

der Inhalt der Datei sieht wie folgt aus:

Code:

define(['lib/mustache/mustache'], function(Mustache) {
    return Mustache;
});

lib/mustache/mustache ist der Referenzpfad für die Bibliothek und wird somit für requireJs definiert.

[FRAGE] Require.js richtig verwenden

weedo

New member