LMS讨论区制作过程中出现的问题 - tianlu1677/tianlu1677.github.io GitHub Wiki

0. 讲一下讨论区的主要流程

1. 讨论区所用到的插件

主要用于插入标签的时候,管理标签。

 $('.tags-input').tagsinput({
      tagClass: 'label label-disc',
      maxTags: 5,
      maxChars: 8
    });
    $('.tags-input').on('beforeItemAdd', function(event){
      if(event.item.length > 8)
      {
        event.cancel = true
      }
    });
//$("select").val()	["Amsterdam","Washington","Sydney","Beijing","Cairo"]

类似于JQuery-autocomplete。主要是能够实现自动提示,跳转链接。还可以实现ajax请求,动态的自动提示。

relationalTopics: () ->
    @topics = new Lms.Collections.TopicsCollection({baseUrl: '/classes/' + current_class.id })
    @topics.fetch
      success: (collection, response, options) ->
        @relateTopicsName = collection.pluck("title")
        JSON.stringify(@relateTopicsName)

        @relateTopics = []
        for title, i in @relateTopicsName
          topic = collection.models[i]
          @relateTopics.push({ value: title , data:{ link: "forums/#{topic.get("forum_id")}/topics/#{topic.get("id")}", posts_count: topic.get("posts_count") } })

        # this is use Auto-complete plugin
        $("#thread-title").devbridgeAutocomplete
          lookup: @relateTopics
          lookupLimit: 8
          triggerSelectOnValidInput: false
          formatResult: (suggestion, currentValue) ->
            return suggestion.value + "     " + suggestion.data.posts_count + "个回答"
          onSelect: (suggestion) ->
            window.location.hash = suggestion.data.link
          onSearchComplete:  (query, suggestions) ->
            if(suggestions.length > 7)
              relationLink = encodeURI("#topics/search?q[title_or_body_cont]=" + $("#thread-title").val())
              $(".autocomplete-suggestions").append('<div class="autocomplete-suggestion" data-index=""><a href="' + relationLink + '">查看全部相关主题</a></div>')

1.3 timeago

显示发布时间与当前的时间差,比较友好

<span class="time"><%= $.timeago(Date.parse(last_edited_at)) %>更新</span>

或者是,会自动增长时间。

jQuery(document).ready(function() {
  jQuery("abbr.timeago").timeago();
});

1.4 弹窗效果 $.alert

$.alert
      confirmTitle: "确认删除",
      contentText: "是否确定删除此主题?",
      cancelBtnText: "取消",
      confirmBtnText: "确定",
      confirmFunc: () => // 确定后执行函数
        @model.destroy()
        this.remove()
        window.location.hash = 'forums/' + forum_id

1.5 分页 backbone.paginator

1.6 富文本编辑器

备选方案: sweetalert

2. 可以优化的地方

⚠️ **GitHub.com Fallback** ⚠️