Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Backbone javascript视图不重新渲染

Backbone javascript视图不重新渲染
EN

Stack Overflow用户
提问于 2014-09-29 14:25:18
回答 1查看 58关注 0票数 0

下面是在页面上发布列表的代码,它们的2函数用于通过提示框删除和更新,当我单击更新时,视图在console.log中得到更新,但在DOM上不刷新。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function(){
window.App = {
    Models: {},
    Collections:{},
    Views: {}
};

window.template = function(id) {
    return _.template($('#'+id).html());
};

App.Models.Task = Backbone.Model.extend({
    validate: function(attrs){
        if (! attrs.title){
            return 'A task requires a valid title';
        }
    }
});

App.Collections.Task = Backbone.Collection.extend({
    model: App.Models.Task
});

App.Views.Tasks = Backbone.View.extend({
    tagName: 'ul',

    render: function(){
        this.collection.each(this.addOne,this);
        return this;
    },

    addOne: function(task){
    var taskView = new App.Views.Task({model:task});
    this.$el.append(taskView.render().el);

    }

});

App.Views.Task = Backbone.View.extend({

    tagName: 'li',

    template: template('taskTemplate'),

    initalize: function(){
        this.model.on('change:title',this.render,this);  
        this.model.on('destory',this.remove,this);
    },

    events: {
       'click .edit': 'editTask',
        'click .delete': 'destroy'
    },

    editTask: function(){
    var newTaskTitle =  prompt('what is the new text for the task ?',this.model.get('title')); 

        if(!newTaskTitle)return;

        this.model.set('title',newTaskTitle);
    },

    destroy: function(){
        this.model.destroy();            
    },

    remove:function(){
    this.$el.remove();
    },

    render: function(){
        var template = this.template(this.model.toJSON());
        this.$el.html(template);
        return this;
    }
});

window.taskCollection = new App.Collections.Task([
    {
        title: 'Go to the store',
        priority:3
    },
    {
        title: 'Go to gym',
        priority:2
    },
    {
        title: 'Learn backbone',
        priority:1
    }
]);

var taskView = new App.Views.Tasks({collection:taskCollection});
$('.tasks').html(taskView.render().el);
})();
EN

回答 1

Stack Overflow用户

发布于 2014-09-29 14:38:46

好的,看起来像是想通了,

我修改了代码,如下所示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
editTask: function(){
    var newTaskTitle =  prompt('what is the new text for the task ?',this.model.get('title')); 

        if(!newTaskTitle)return;

        this.model.set('title',newTaskTitle);
        **this.render();**
    }

这段代码用来销毁

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
destroy: function(){
        this.model.destroy(); 
        this.$el.remove();
    },

谁能告诉我为什么this.reder不能工作?(我在youtube上的一个教程中看到了这个)- this.model.on('change:title',this.render,this);

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26102234

复制
相关文章
Rails布局和视图渲染
基于“多约定,少配置”原则,在 index 动作末尾并没有指定要渲染的视图,Rails会自动在控制器的视图文件夹中寻找 action_name.html.erb 模板,然后渲染。这里渲染的就是 app/views/books/index.html.erb
用户1515472
2019/07/24
3.4K0
iOS 视图,动画渲染机制探究
终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,它的体验伴随着用户使用 App 的整个过程。如果UI失败,用户是不会有打开第二次的欲望的。 iOS 为开发者提供了丰富的 Framework(UIKit,Core Animation,Core Graphic,OpenGL 等等)来满足开发从上层到底层各种各样的需求。不得不说苹果很牛逼,很多接口你根本不需要理解背后的原理就能上手使用并且满足你大部
QQ音乐技术团队
2018/02/01
1.9K0
iOS 视图,动画渲染机制探究
iOS 视图,动画渲染机制探究
终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,它的体验伴随着用户使用 App 的整个过程。如果UI失败,用户是不会有打开第二次的欲望的。 iOS 为开发者提供了丰富的 Framework(UIKit,Core Animation,Core Graphic,OpenGL 等等)来满足开发从上层到底层各种各样的需求。不得不说苹果很牛逼,很多接口你根本不需要理解背后的原理就能上手使用并且满足你大部
腾讯Bugly
2018/03/23
1.6K0
iOS 视图,动画渲染机制探究
Vue内部是如何渲染视图
vnode其实就是一个描述节点的对象,描述如何创建真实的DOM节点;vnode的作用就是新旧vnode进行对比,只更新发生变化的节点。
用户9700400
2022/11/21
9540
Vue内部是如何渲染视图
重新认识HTML渲染过程
浏览器从输入地址到显示页面的过程,这是面试特别喜欢问的一道题,也是基础的一个概念。到现在,网上能找到的也都是很老的那一套,早之前我的认知也是那样:
wade
2021/05/08
1.5K0
重新认识HTML渲染过程
Vue数据不渲染问题
使用vue开发项目的时候,几乎都会遇到一个问题,数据改变了,但是页面没有渲染。这种情况下一般都是数组和json才会发生。
wade
2020/04/24
1.6K0
Backbone源码研究 – Backbone.Model
都因为 IE8 不支持 Object.defineProperty,但是业务还不能脱离 IE7 和 IE8,故研究下 Backbone.Model 的实现机制,找机会给主流的 MVVM 框架补丁
libo1106
2018/08/08
3290
重新认识 JavaScript
前端框架轮替变化越来越快,JavaScript 也在不断地升级迭代,越来越多的新特性让我们的代码写起来变得简洁有趣。
Cell
2022/05/02
3610
父视图半透明而子视图不半透明
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/50970269
用户1451823
2018/09/13
1.3K0
多种前端框架的优缺点「建议收藏」
Web前端目前现有的UI框架:Element、Bootstrap、JqueryUi、Foundation、Semantic UI、Pure、UIkit Web前端目前现有的JS框架:JQuery、Zepto、VueJS、AngularJS、ReactJS、backbone 、ember
全栈程序员站长
2022/08/04
3.7K0
第6章—渲染web视图—使用Apache Tiles视图定义布局
Tiles是一个免费的开源模板Java应用程序的框架。基于复合模式简化的用户界面的构建。对于复杂的网站仍是最简单、最优雅的方式与任何MVC技术一起工作。Struts2对Tiles提供了支持,如今Tiles发展已有13个年头,成为Apache的一个独立项目,我们可以单独使用Tiles来构建用户界面布局。
Dream城堡
2018/09/10
5450
第6章—渲染web视图—使用Apache Tiles视图定义布局
详解强制Vue组件重新渲染的方法
虽然Vue不会自动更新这种情况是相对比较少,但是知道如何在出现这个问题时修复它还是很有用的。
Javanx
2020/08/19
4.3K0
iOS开发-视图渲染与性能优化
前言 关于iOS的视图渲染流程,以及性能优化的建议。 源于WWDC视频。 我假设你是一个这样的开发者: 了解OpenGL ES; 了解view hierarchy; 了解instruments; view hierarchy和instruments网上资料很多,OpenGL ES的你可以看OpenGL ES文集。 视图渲染 UIKit是常用的框架,显示、动画都通过CoreAnimation。 CoreAnimation是核心动画,依赖于OpenGL ES做GPU渲染,CoreGraphics做CPU渲
落影
2018/04/27
1.7K0
iOS开发-视图渲染与性能优化
ThinkPHP-视图的使用和渲染(一)
ThinkPHP是一款基于PHP开发的高性能、简洁优雅的Web应用框架,它提供了丰富的功能和灵活的架构,可以帮助我们快速搭建各种类型的Web应用程序。其中,视图(View)是框架中非常重要的一部分,它负责渲染模板和输出内容,让我们可以方便地将数据和界面进行分离。
堕落飞鸟
2023/05/02
8700
layui实现iframe框架_layui table重新渲染
layuiAdmin.std(iframe 版) 是完全基于 layui 架构而成的通用型后台管理模板系统,采用传统的 iframe 多页面开发模式,可更快速直接地开发网页后台应用程序,无需过多地学习成本,简单高效,撸起袖子直接干。
全栈程序员站长
2022/11/17
2.6K0
10个最受欢迎的 JavaScript 框架,以及它们的主要特征和功能
多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个挑战。如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么我已经帮你解决了问题。在本文中,我将列出用来构建 Web 应用程序的前10个 JavaScript 框架。
用户5827212
2020/01/17
4K0
ThinkPHP-视图的使用和渲染(二)
在ThinkPHP中,我们可以使用layout方法来设置布局文件。layout方法需要传入布局文件的路径,例如:
堕落飞鸟
2023/05/02
6060
Front-End MV*简述(一)
近几年来由于web应用的交互越来越复杂,前端技术也迎来了一个飞速发展的时期。本文意在描述前端MV类型的框架发展历程及对部分MV\框架的介绍。
IMWeb前端团队
2019/12/03
7010
Front-End MV*简述(一)
Front-End MV*简述(一)
IMWeb前端团队
2018/01/08
9950
Front-End MV*简述(一)
点击加载更多

相似问题

Yeoman backbone视图不渲染

11

backbone渲染不渲染select标签

12

渲染时不显示brightcove (不刷新页面-重新渲染普通Backbone.js视图)

10

模型更改时的Backbone.marionette重新渲染视图

11

backbone视图事件在重新渲染后不起作用

31
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文