个人中心
gpt4 book ai didi

javascript - Backbone JS View 渲染不显示

转载 作者：行者123 更新时间：2023-11-30 00:33:44 25 4
gpt4 key购买 nike

<分区>

在下面的代码中，无法呈现“TodoList”。似乎获取需要时间并显示'0 ' 和 <div id=​"demo">​</div>​之前而已。

我不确定为什么 ' 3 ' 和 ' Descriptions ' 稍后显示。我只需要显示' Descriptions List ' 在页面中。我能够从服务器获取数据，但不知何故无法在数据到达后立即显示。请告诉我需要对以下代码进行哪些更改？

<html>
<head>
<link rel="stylesheet"
    href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>

<body>

<div id="demo"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

<script type="text/javascript">

var TodoItem = Backbone.Model.extend({
    urlRoot: 'api',
})

var TodoCollection = Backbone.Collection.extend({
    model: TodoItem,
    url: 'api/todos'
})

var TodoView = Backbone.View.extend({
    template: _.template('<h3> ' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>/>' +' <%= description %></h3>'),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()))
    }

})

var TodoListView = Backbone.View.extend({
    initialize: function(){
        this.listenTo(this.collection,'reset',this.render)
        this.collection.fetch({reset:true})
    },
    render: function(){
        console.log(this.collection.length)
        this.collection.forEach(this.addOne,this)
    },
    addOne: function(todoItem){
        console.log(todoItem.get('description'))
        var todoView = new TodoView({model: todoItem})
        this.$el.append(todoView.render())
    }

})


var todoItem = new TodoItem()
var todoList = new TodoCollection()

var todoListView = new TodoListView({el: '#demo', collection: todoList})

todoListView.render()

console.log(todoListView.el)


</script>

</body>

</html>

这是我得到的控制台输出:

0 
<div id=​"demo">​</div>​     
3 
pick up cookies
Milk 
Cookies

25 4 0
文章推荐： javascript - 在 Angular 中，如何从指令访问我编译的模板？
文章推荐： javascript - 我应该使用哪种可视化来显示组合？
文章推荐： javascript - 是否还需要 highcharts-more(从 highcharts 版本 4.0.4 开始)？
文章推荐： javascript - 在提交时将日期格式从 dd M yy 更改为 "2015-01-28T00:00:00+00:00"datepicker
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com