Backbone使用总结
发布日期:2021-08-16 15:55:27 浏览次数:4 分类:技术文章

本文共 2714 字,大约阅读时间需要 9 分钟。

 

Backbone使用总结

 View   (主要通过观察者模式)

 视图(DOM)通过使用listenTo监听collection,model变化

  1. this.listenTo(c,'remove',function(model, collection){
  2. $('#'+ model.id).remove();
  3. // sum(c.length);
  4. });
  5. this.listenTo(c,'add',function(model, collection){
  6. console.log(model);
  7. console.log(collection);
  8. var view =newView(model);
  9. $("#mail-list").append(view.render().el);
  10. });

视图与视图通信

父视图与子视图之间通信方式:
  1. varParentView=Backbone.View.extend({
  2. tagName:'div',
  3. id:'parentDiv',
  4. initialize:function(){
  5. this.childView =newChildView();
  6. },
  7. render:function(){
  8. this.$el.html(this.childView.render().el);
  9. returnthis;
  10. }
  11. });
  12. varChildView=Backbone.View.extend({
  13. tagName:'div',
  14. id:'childDiv',
  15. render:function(){
  16. this.$el.html('hello wrold');
  17. returnthis;
  18. }
  19. });
  20. var parentView =newParentView();
  21. $('body').append(parentView.render().el);
 
 
子视图与子视图之间通信方式:
方式一:通过父视图
  1. varParentView=Backbone.View.extend({
  2. tagName:'div',
  3. id:'parentDiv',
  4. initialize:function(){
  5. this.childView =newChildView();
  6. this.childView2 =newChildView2();
  7. //方式一
  8. this.childView.listenTo(this.childView2,'test',function(data){
  9. console.log('--------------');
  10. console.log('data--->',data);
  11. });
  12. },
  13. render:function(){
  14. this.$el.html(this.childView.render().el);
  15. this.$el.append(this.childView2.render().el);
  16. console.log('trigger childrenView2');
  17. this.childView2.trigger('test');
  18. returnthis;
  19. }
  20. });
  21. varChildView=Backbone.View.extend({
  22. tagName:'div',
  23. id:'childDiv',
  24. render:function(){
  25. this.$el.html('hello wrold');
  26. returnthis;
  27. }
  28. });
  29. varChildView2=Backbone.View.extend({
  30. tagName:'div',
  31. id:'childDiv2',
  32. initialize:function(){
  33. this.on('test',function(){
  34. console.log('hello');
  35. });
  36. },
  37. render:function(){
  38. this.$el.html('hello wrold222222222');
  39. returnthis;
  40. }
  41. });
  42. var parentView =newParentView();
  43. $('body').append(parentView.render().el);
 
方式二:通过全局便利Backbone
  1. varParentView=Backbone.View.extend({
  2. tagName:'div',
  3. id:'parentDiv',
  4. initialize:function(){
  5. this.childView =newChildView();
  6. this.childView2 =newChildView2();
  7. },
  8. render:function(){
  9. this.$el.html(this.childView.render().el);
  10. this.$el.append(this.childView2.render().el);
  11. returnthis;
  12. }
  13. });
  14. varChildView=Backbone.View.extend({
  15. tagName:'div',
  16. id:'childDiv',
  17. render:function(){
  18. Backboone.trigger('children2',{
    name:'children111111111111111'});
  19. this.$el.html('hello wrold');
  20. returnthis;
  21. }
  22. });
  23. varChildView2=Backbone.View.extend({
  24. tagName:'div',
  25. id:'childDiv2',
  26. initialize:function(){
  27. Backbone.on('children2',function(data){
  28. console.log('this is ChilrenView2222222222222');
  29. console.log(data);//{name:'children111111111111111'}
  30. })
  31. },
  32. render:function(){
  33. this.$el.html('hello wrold222222222');
  34. returnthis;
  35. }
  36. });
  37. var parentView =newParentView();
  38. $('body').append(parentView.render().el);
 
* 数据逻辑处理尽量不要放在视图层(View)
未完。。。。。。。。。。。。。。。。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

转载于:https://www.cnblogs.com/niunai007/p/6540150.html

转载地址:https://blog.csdn.net/weixin_30810239/article/details/98580179 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:删除Kali Linux多余的系统架构
下一篇:解决Mysql中文乱码问题

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年03月04日 15时18分01秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java 403怎么抛出_java – 如何在Spring MVC中返回403禁止? 2019-04-21
java jsch工具类_Java工具集-JSch连接远程服务器工具类 2019-04-21
cmd背景变红1003无标题_怎样修改cmd中文字的大小、颜色和背景颜色呢 原来是这样的... 2019-04-21
php rand() 重复,php – mt_rand()给我总是相同的数字 2019-04-21
php taglib.php,thinkphp5 taglib自定义标签教程 2019-04-21
java常用包类 array,Java中的StringBuffer和数组Arrays以及常用类型的包装类 2019-04-21
ctf常见php,CTF中常见的PHP伪协议 2019-04-21
php语言冒泡法,PHP 冒泡排序法 2019-04-21
php如何数组去重复,PHP如何去除数组重复元素? 2019-04-21
java转换ab的值,查看新闻/公告--[整理]Java将AB1234形式的16进制字符串转换为10进制数值,考虑字节序的影响.... 2019-04-21
ui php h5,画出自己的UI组件的详情 2019-04-21
linux服务文件编写,linux编写systemd下服务脚本 2019-04-21
hdfs linux 目录是否存在,Linux中判断hdfs文件是否存在 2019-04-21
linux学习需要什么基础,学linux需要什么基础? 2019-04-21
linux vim编辑kconfig 无法wq,Linux-4.9.2内核在mini2440上的移植(三)——编译环境测试... 2019-04-21
高斯勒让德在c语言中的程序,c语言:用递归方法编写程序,求n阶勒让德多项式的值... 2019-04-21
c语言单片机电子时钟,新人求个51单片机的电子时钟汇编语言(C语言的还没学到)... 2019-04-21
c++语言文件流,C++文件流 2019-04-21
android 动态毛玻璃,Android毛玻璃背景效果简单实现代码 2019-04-21
android 按钮提示,的Android按钮工具提示 2019-04-21