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

Question

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

For循环代码

<!-- 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.

的部分和其余部分之间似乎存在脱节

有什么想法吗？

Answer 1

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

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

查看这个非常全面地涵盖了范围界定的答案：

你的属于：

高级：闭包

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

})();

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

Undefined variable object using Underscore JS partials and for loop

javascript

jquery

underscore.js