function works outside of object will not work when called inside an object

问题

I am trying to inject my page when it loads with a template using mustache. If i call my function to grab and inject the DOM with this data outside of the portfolio{} object it works perfectly fine and the HTML is injected on page and data is displayed correctly. but if i try to place my function inside of the portfolio{} object and call the function it will not work. This makes no since to me what so ever and i am getting quite frustrated with it. If anyone knows what might be causing this and how to fix i would be very grateful.

i am able to call the data from within the portfolio object and it works so i know it has nothing to do with the structure of my data.

I get no errors to help debug either.

THIS WORKS:

var portfolio = {
    projects: { 
        "proj": [
            {
                id:"1",
                title:"Heller Recipes",
                description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                projectLink:"http://www.google.com",
                genre:"web-app",
                images: [
                    {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                ]
            },
            {
                id:"2",
                title:"3D Animation",
                description:"Created using 4D Cinema Max, a 3d anitmation program that allows you to create realistic renderings and animations.",
                technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                projectLink:"http://www.google.com",
                genre:"3d",
                images: [
                    {largePic:"img/projects/4dmax.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                ]
            },
        ]
    }
 };
$('body').on('click', '.logo', function(){
    var template = $('#projects_tmp').html();
    var html =  Mustache.to_html(template, { "proj" : portfolio.projects.proj });
    $('.portfolio-wrapper').html(html);
});

THIS DOESN'T:

var portfolio = {
    projects: { 
        "proj": [
            {
                id:"1",
                title:"Heller Recipes",
                description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                projectLink:"http://www.google.com",
                genre:"web-app",
                images: [
                    {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                ]
            },
            {
                id:"2",
                title:"3D Animation",
                description:"Created using 4D Cinema Max, a 3d anitmation program that allows you to create realistic renderings and animations.",
                technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                projectLink:"http://www.google.com",
                genre:"3d",
                images: [
                    {largePic:"img/projects/4dmax.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                ]
            },
        ]
    },
    init: function(){
        var template = $('#projects_tmp').html();
        var html =  Mustache.to_html(template, { "proj" : portfolio.projects.proj });
        $('.portfolio-wrapper').html(html);
    }
}
portfolio.init();

回答1:

You can't access portfolio from within init by name, because it doesn't quite exist yet. Try referring to portfolio with an alias to this (being portfolio), in case Mustache is clobbering this somehow):

var portfolio = {
    projects: { /* omitted */ },
    init: function() {
        var self = this;
        var template = $('#projects_tmp').html();
        var html =  Mustache.to_html(template, { "proj" : self.projects.proj });
                                                       // ^ use "self"
        $('.portfolio-wrapper').html(html);
    }
}
portfolio.init();

Here's a simple example of this in action:

var sampleObject = {
    property1: 'Hello, World!',
    init: function() {
        var self = this;
        alert(self.property1); 
    }
}

sampleObject.init();

来源：https://stackoverflow.com/questions/28753657/function-works-outside-of-object-will-not-work-when-called-inside-an-object

标签

jquery

mustache