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

我正在尝试使用胡子加载模板时注入我的页面。 如果我调用我的函数来抓取并在组合{}对象之外注入带有此数据的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); }); 

这不是：

 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

您无法通过名称从init访问portfolio ，因为它尚不存在。 尝试引用具有别名的portfolio （作为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();