使用Underscore JS部分和for循环的未定义变量对象

Undefined variable object using Underscore JS partials and for loop

本文关键字：循环 未定义 变量 对象 for Underscore JS 使用      更新时间：2023-09-26

我正在编写一个twitter聚合器，我需要一些帮助来解决错误"Uncaught ReferenceError:sqTweetData is not defined"看起来控制台正在将我指向for循环。我已经设置了一个使用下划线js编译并加载到#main内容中的分部。

对于环路代码

<!-- Main Content -->
<main class="main">
    <div class="container-flex" id="main-content"></div>
</main> <!-- End Main Content -->
<!-- Current Tweet Partials -->
<script id="active-tweet-partial" type="underscore/template">
    <section class="tweetFlexItem">
    <% for (var i = 0; i < sqTweetData.length; i++) { %>
        <div class="activeTweet">
            <div class="activeTweet__avatar"><img src="<%= sqTweetData[ i ].user.profile_image_url %>"></div>
            <div class="activeTweet__wrapper">
                <div class="activeTweet__name"> <%= sqTweetData[ i ].user.name %> </div>
                <div class="activeTweet__message"><%= sqTweetData[ i ].text %></div>
            </div>
        </div>
    <% } %>
    </section>
</script>

home.js编译代码

var Home = (function() {
var sqTweetData = {
    user: [{
        profile_image_url : "assets/avatar.png",
        name : "@johnsnow"
    }],
    text : "Someone once said that I know nothing..."
};
console.log("this is sqTweetData", sqTweetData);
// Partials
var tweetPartial = $('#active-tweet-partial').html();
    tweetPartialCompiled = _.template( tweetPartial );
// DOM Handlers
// KICKSTART VIEW
function initHome() {
    // load main content
    $('#main-content').html(tweetPartialCompiled( sqTweetData ));
    // bind events
}
return {
    init: initHome
};
})();

第11行的console.log运行良好，所以我假设我的变量对象设置正确。javascript的部分和其余部分之间似乎存在脱节。

有什么想法吗？

这是一个作用域问题。sqTweetData说它是未定义的，因为它正是这样。window["sqTweetData"]不存在。当您在函数外部声明一个变量时，它被插入到全局名称空间中，在这种情况下，浏览器window就是名称空间。

由于您使用var关键字在home中声明变量，因此只能在Home函数中访问该变量。因此，您必须将其添加为this.sqTweetdata并将其与对象一起返回，或者添加一个单独的getTweetData()来返回变量，或者类似的东西。

看看这个答案，它非常全面地涵盖了范围界定：https://stackoverflow.com/a/500459/3629438

你的属于：

高级：关闭

var a = 1;
var six = (function() {   
  var a = 6;
  return function() {
    // JavaScript "closure" means I have access to 'a' in here,
    // because it is defined in the function in which I was defined.
    alert(a);   
  }; 
})();

编辑：

在你的情况下，你会做一些类似的事情

var Home = (function() {
// ....... //    
function getTweetData() {
   return sqTweetData;
}
return {
    init: initHome,
    get: getTweetData
};
})();
相关文章：