渲染ejs模板的时候可能会发生的问题

来源:8-6 加载更多-返回数据

Inuyasha__

2020-04-21

<% blogList.forEach(blog => { %>
  <div class="item-wrapper">
      <img class="user-picture" src="<%= blog.user.picture%>"/>
      <div class="content clear-fix">
          <% if (blog.image) { %>
          <a href="<%= blog.image%>" target="_blank">
              <img class="blog-img" src="<%= blog.image%>"/>
          </a>
          <% } %>
          <a href="/profile/<%= blog.user.username%>">
              <%= blog.user.nickname%>
          </a>:
          <span><%= blog.content%></span>
      </div>
      <div class="info">
          <span><%= blog.createdAtFormat%></span>
          &nbsp;
          <% if (locals.canReply) { %>
          <%# 可以回复 %>
          <a href="#" class="blog-list-reply"
              data-content="<%= blog.content%>"
              data-username="<%= blog.user.username%>"
              data-nickname="<%= blog.user.nickname%>"
          >
              <i class="fa fa-mail-reply"></i> 回复
          </a>
          <% } %>
      </div>
  </div>
<% }) %>

<script>
$(function () {
  // 设置焦点
  function setCursor(el, st, end) {
      if (el.setSelectionRange) {
          el.focus()
          el.setSelectionRange(st, end)
      } else if (el.createTextRange) {
          var range = el.createTextRange()
          range.collapse(true)
          range.moveEnd('character',end)
          range.moveStart('character',st)
          range.select()
      }
  }

  // 回复
  var $textContent = $('#text-content')
  $('.blog-list-reply').click(function (e) {
      e.preventDefault()
      var $target = $(e.target)

      // 获取内容和用户
      var content = $target.attr('data-content')
      var username = $target.attr('data-username')
      var nickname = $target.attr('data-nickname')

      // 设置内容并获取焦点
      $textContent.val(' // @' + nickname + ' - ' + username + ' : ' + content)
      setCursor($textContent[0], 0, 0)
  })
})
</script>

上面是ejs模板
想问一下用这种方式,渲染出来的,script标签内不是会重复执行吗,那这样的话

$('.blog-list-reply').click(function (e) {
      e.preventDefault()
      var $target = $(e.target)

      // 获取内容和用户
      var content = $target.attr('data-content')
      var username = $target.attr('data-username')
      var nickname = $target.attr('data-nickname')

      // 设置内容并获取焦点
      $textContent.val(' // @' + nickname + ' - ' + username + ' : ' + content)
      setCursor($textContent[0], 0, 0)
  })

这一段代码渲染n次就执行n遍, 是不是应该在前面先加一行

$('.blog-list-reply').off('click')

把默认的事件给注销掉,这样不加载更多很多次看不出来,加载很多次之后,点击一下会触发n次click事件

写回答

1回答

双越

2020-04-21

为何会重复执行吗?<script>标签没有在 forEach 之内。

0
2
双越
回复
Inuyasha__
这样的话,可以先 off ,再重新绑定。没毛病,你考虑的很仔细。
2020-04-22
共2条回复

Node.js+Koa2框架生态实战 - 从零模拟新浪微博

用 Koa2 做真正的实战项目,不再只是增删改查的小白工程师

967 学习 · 388 问题

查看课程