Question

我正在尝试使用小胡子加载模板时注入我的页面。如果我调用我的函数来抓取并注入带有此数据的DOM 组合{}对象完全正常工作，HTML被注入页面并正确显示数据。但是如果我尝试将我的函数放在portfolio {}对象中并调用该函数它将无法正常工作。从来没有对我这么做，我对此感到非常沮丧。如果有人知道可能导致这种情况的原因以及如何解决，我将非常感激。

我能够从投资组合对象中调用数据并且它可以工作，所以我知道它与我的数据结构无关。

我没有任何错误可以帮助调试。

这项工作：

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);
});

这就是＆＃39; 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();

Answer 1

您无法通过名称在portfolio内访问init，因为它尚不存在。尝试使用别名portfolio（this）来引用portfolio，以防Mustache以某种方式破坏this：

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();

以下是一个简单的示例：

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

在对象内部调用时，对象外部的函数不起作用

1 个答案: