javascript - 如何处理 DOM 更改覆盖某些变量的情况？

Question

我正在使用 Ruby on Rails、jQuery v1.8.3 和 jQuery UI v1.9.2。在视图文件中，我以这种方式呈现部分模板：

<%= render :partial => 'template_name', :locals => { :div_id => 'div_id1' } %>

相关template_name文件包含以下内容：

<script type="text/javascript">
  var item = $('#<%= div_id %>')

  alert(item.selector) // Display #div_id1
</script>

在同一页面上，通过 AJAX 请求，我检索并添加到 DOM 相同的部分模板，但具有:locals => { :div_id => 'div_id2' }：

<script type="text/javascript">
  var item = $('#<%= div_id %>')

  alert(item.selector) // Display #div_id2
</script>

进行上述操作后，在AJAX 请求之后，我“丢失”了对#div_id1since的引用item与#div_id2.

我应该如何处理这种情况以避免“覆盖”变量？我如何“隔离”（可能是命名空间或使用一些 jQuery 功能）这些变量？

Answer 1

如果代码片段是自包含的，您应该能够将代码移动到私有范围内。

<script type="text/javascript">
    (function(){
        var item = $('#<%= div_id %>');
        alert(item.selector); // Display #div_id2
    })();
</script>

虽然我不同意让服务器端代码生成基于 javascript 的 ui 小部件。