jquery技巧


//var list = $(".em-chat-list-tabcontainer[agent]").find("li[sign="+ model.cid+"]");
var list = $('li')
list.each(function(index, ele){
    console.log(index + ':' + ele )
    //ele 需要$(ele)
})
    

backbone技巧

view初始化需要直接传入$el或者this.setElement(this.template())两种用法
1初始化时传入jq元素作为view.$el(如果不传入默认为$("<div></div>"))
2使用this.setElement(this.template())将模板作为view.$el
view.$el
项目中初始化的时候有时会传入$pa(jquery)作为挂在元素挂在this.$el

list模块

冒泡事件
1 this.trigger("ui.list.select", model);
2 this.trigger("ui.list.click", model);
3 me.trigger("ui.list.rendered");
4 me.trigger("ui.list.emptied");
5 this.trigger("ui.list.change");//add和remove会触发change事件(回头可以增加render的时候也加上)
监听传入的collection的方法
update(colletion)//重新刷新列表//触发render事件 或empty事件,先清空el再循环挂载

tList = new List({
  el:  $("<ul class='ui-cmp-list'>"),
  collection:  this.agentCollection,
  itemclz:  AgentItem,
  selectStrategy:  ["user.userId", Globals.agentCallingBackId]
});
//首先执行initclass 接着renderItem向el循环挂载item  
//使用时可以直接用list.$el

会话模块

微贷增加客服同事搜索功能
1 pageview 中挂载新的搜索模块 并且冒泡触发监控搜索模块,
2搜索模块执行this.$el.trigger("search.input.change", inputval);
3pageview页面监控input变化每次执行search方法,监听相应list模块中的冒泡时间(与原有列表点击时间同步),最后执行$(".search-list-box").empty().append(list.$el);

list模块每次点击相应条目的时候 触发自身onItemClick方法,进而trigger('ui.list.selected'),visitolistview(父级元素)监听了以后触发this.$el.trigger(".update.visitorDchatetail", model);pageview监听了以后执行this.visitorDetail.update(model)刷新右侧列表;
而同事客服模块直接触发pageview中的ui.list.selected事件更新由此列表this.agentDetail.update(model);

graph LR;
  pageview-->listtab
  pageview-->visitorListComposer
  visitorListComposer-->2((进行中整体模块))
  visitorListComposer-->searchbarview
  visitorListComposer-->searchvisitorview
  searchvisitorview-->searchvisitoritemview
  visitorListComposer-->VisitorListView
  VisitorListView-->visitoritemview
  listtab-->1((进行中和同事tabb))
  pageview-->AgentItem
  AgentItem-->oprate((在pageview用list模块包装渲染客服同事列表))
 
 pageview-->VisitorChatSession
 VisitorChatSession-->3((进行中模块详情))
 pageview-->AgentChatSessionView
 AgentChatSessionView-->4((客服同事详情))

待接入模块

emtab默认掩藏,其功能为切换WaitListView和AgentCallVisitorView
点击每一项触发WaitListView进而show它的waitlistdetail模块

graph LR;
  pageview-->FilterView
  FilterView-.this.waitlist.query.->WaitListView
  pageview-->EmTab
  EmTab-->5((默认掩藏))
  pageview-->WaitListView
  WaitListView-->6((默认展示))
  WaitListView--用table包装-->itemview
  itemview-->13((this.body))
  WaitListView-->paginator
  paginator-->14((this.footer))
  WaitListView-->WaitListDetail
  WaitListView-->StandardWrapView
  StandardWrapView-->TransferTemplateView
  StandardWrapView-->9
  WaitListView-->MixWrapView
  MixWrapView-->TransferTemplateView
  TransferTemplateView-->11((通过传入的isTabModelFlag区分))
  TransferTemplateView-->TransferAgentView
  TransferTemplateView-->TransferGroupView
  TransferAgentView-->12
  TransferGroupView-->12((此为一个tab切换下的两个模块 ddd))
  TransferTemplateView-->TransferBySkillGroupView
  MixWrapView-->9((转接搜索框 不同类型,this.transfer=new dddddd))

  WaitListDetail-->WaitListMsgFactory
  pageview-->AgentCallVisitorView
  AgentCallVisitorView-->7((默认隐藏))
  AgentCallVisitorView-->agentitemview

Backbone.PageableCollection.extend({})

此collection用到了插件,可以在queryqueryParams中直接添加请求参数,也可以通过以下方法重写fetch方法

var _fetch = Backbone.PageableCollection.prototype.fetch;
VisitorCollection = Backbone.PageableCollection.extend({

  tenantId: 0,
  url: function(){
    return "/customers/_search";
  },

  fetch: function(options){
    options.type = "post";
    options.contentType = "application/json";
    options.processData = false;
    _fetch.apply(this, [options]);
  },
})

增加模块的步骤

  • 增加权限类型
  • 增加权限
  • 增加路由module
  • 增加路由组件
  • 增加组件的id容器

statics(统计)

管理员首页为dashboard(仪表盘)


镰月
313 声望13 粉丝

它的优秀之处并非原创,它的原创之处并不优秀。