Giter VIP home page Giter VIP logo

Comments (3)

jonnyreeves avatar jonnyreeves commented on August 19, 2024

Hey @antonioOrtiz, sorry to hear you are having issues.

The console error message you attached, and source code that you pasted shows that the templates are being loaded from templates/index.html (via: $.Mustache.load('templates/index.html')).

However, the directory tree screenshot you posted show that your templates reside in public/js/templates/index.html; could you try modifying your code to load them from there instead:

$.Mustache.load('js/templates/index.html')

from jquery-mustache.

antonioOrtiz avatar antonioOrtiz commented on August 19, 2024

Hey Jonny! Thanks for your help!
I tried $.Mustache.load('js/templates/index.html') but that didn't work. However, just as a test, I put the template in the same directory (app.js and index.html live in the same directory, js in this case), that didn't work either. But in the console, strangely I get a messsage indicating it's ok. (The load request)

screen shot 2015-10-12 at 8 49 14 am

Yet as you can see there is no template in the DOM...

screen shot 2015-10-12 at 8 49 51 am

This is the template markup, that's the only thing I can think of is wrong,

<script id="templateID" type="text/html">
<div id="overlay">
    <div id="container" class="container">
        <div class="row">
            <div class="twelve columns">
               <div class="modal-container">
                    <div id="modal" class="modal-animation">
                        <p>Bitters pop-up authentic actually, next level fashion axe ethical lomo cold-pressed.  Pickled Wes Anderson +1 retro squid, chia cray umami cred dreamcatcher selfies.
                        <a id="appButton" class="button button-primary modal-button">lets get started!</a>
                        </p>
                    </div>
               </div>
            </div>
        </div>
    </div>
</div>
</script>

but now I feel I am grasping at straws. Do you think it's cause I am using browserify-shim. I have talked to guys who made browserify-shim at they don't think it is, as I am not getting errors regarding bs. I ask because I am using jquery-Mustache in another project at it works perfectly?

https://github.com/antonioOrtiz/accessibility_project

<script id="templateID" type="text/html">

This app will go through some of your markup to determmine if it could be more accessible. We will start by checking the alt tags on your images, seeing if they exist, or if the tags are empty!
lets get started!

</script>

from jquery-mustache.

antonioOrtiz avatar antonioOrtiz commented on August 19, 2024

Hey Jonny,

I also went back and tried to implement a simpler instance, based on your examples:

screen shot 2015-10-12 at 12 47 53 pm

jQuery(document).ready(function($) {

function templateLoader() {
    $.Mustache.load('single-template.html')
        .done(function() {
            var output = $('body');
            output.append($.Mustache.render('single-template', {
                name: "Dave"
            }));
        });

}
var flimFlam = document.getElementById('Container');
EventUtility.addHandler(flimFlam, 'click', templateLoader);

});

And that didn't work...
I also checked the app.js file to see the if the jquery-Mustache.js and mustache.js and being distilled in there (they are). I wonder if it's a jQuery name spacing/alias issue?

Also I noticed you had a TUT for require js, you think my browserify-shim needs fixing?

"main": "./app/_js/app.js",
"browser": {
    "mixitup": "./app/bower_components/mixitup/src/jquery.mixitup.js",
    "jquerymustache": "./app/bower_components/jquery-Mustache/jquery.mustache.js"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},
"browserify-shim": {
    "mixitup": {
        "exports": "mixitup",
        "depends": [
            "jquery:jQuery"
        ]
    },
    "jquerymustache": {
        "depends": [
            "jquery:jQuery",
            "mustache:mustache"
        ]
    }
},

And this is how I am requiring them:

var $ = jQuery = require('jquery');
var mixitup = require('mixitup');
var Mustache = require('jquerymustache');
var mustache = require('mustache');

And this is the concatenated app.js file that gets spit out to the public/js
app

Thanks so much!!!

from jquery-mustache.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.