Javascript 主干js Todo代码未显示在浏览器中_Javascript_Jquery_Backbone.js

Javascript 主干js Todo代码未显示在浏览器中

javascript jquery backbone.js

Javascript 主干js Todo代码未显示在浏览器中,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我正在学习主干JS，为什么我下面的代码没有显示在浏览器中？我甚至使用了路由器，但仍然没有在浏览器中显示。请告诉我出了什么问题。顺便说一句，输出仅显示在控制台中。抱歉，如果这是一个愚蠢的问题 <html> <head> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"&

我正在学习主干JS，为什么我下面的代码没有显示在浏览器中？我甚至使用了路由器，但仍然没有在浏览器中显示。请告诉我出了什么问题。顺便说一句，输出仅显示在控制台中。抱歉，如果这是一个愚蠢的问题

<html>
    <head>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
        <script type="text/javascript">
            /*$.getJSON('api/users/1',function(data){
                console.log(data);
            });*/
        </script>
    </head>
    <body>
        <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({
                toggleStatus: function(){
                    if(this.get('status') == 'incomplete'){
                        this.set({'status':'complete'});
                    } else {
                        this.set({'status':'incomplete'});
                    }
                }
            })

            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()));
                },
                events: {
                    'change imput': 'toggleStatus'
                },
                toggleStatus : function(){
                    this.model.toggleStatus();  
                }
            })


            var todoItem = new TodoItem({ description: 'Pick up milk', status: 'incomplete', id: 1 });
            var todoView = new TodoView({model: todoItem});


            console.log(todoView.el);

            var Router = Backbone.Router.extend({
                routes: {
                    '': 'home'
                }
            });
            var router = new Router();
            router.on('route:home' , function(){
                    todoView.render();
            });

            Backbone.history.start();
        </script>
    </body>
</html>


/*$.getJSON（'api/users/1'，函数（数据）{
控制台日志（数据）；
});*/
var TodoItem=Backbone.Model.extend({
toggleStatus:function（）{
if（this.get（'status'）=='complete'）{
这个.set（{'status'：'complete'}）；
}否则{
set（{'status'：'complete'}）；
}
}
})
var TodoView=Backbone.View.extend({
模板：u.模板（“”+“”+“”），
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
},
活动：{
“更改输入”：“切换状态”
},
toggleStatus:function（）{
this.model.toggleStatus（）；
}
})
var todoItem=new todoItem（{说明：'拾取牛奶'，状态：'不完整'，id:1}）；
var todoView=新todoView（{model:todoItem}）；
console.log（todoView.el）；
var Router=Backbone.Router.extend({
路线：{
“家”
}
});
var router=新路由器（）；
路由器.on（'route:home'，function（）{
todoView.render（）；
});
Backbone.history.start（）；

您的TodoView未附加到DOM中

为视图设置“el”属性

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

var TodoView=Backbone.View.extend({
el:“身体”，
模板：u.模板（“”+“”+“”），
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
},
活动：{
“更改输入”：“切换状态”
},
toggleStatus:function（）{
this.model.toggleStatus（）；
}
})

每个视图都应该以这种方式呈现，当您想要创建新元素时，请指定标记名、类名和id，当需要一个元素向其追加视图时，您应该指定el来选择它（jquery选择它）。代码的下一个问题是不在render函数中返回该值。当您有嵌套视图时，应该返回此值

我已经在这个箱子里测试过了

只是个疑问。。我听说“el”的默认值是DIV tag，那么为什么要声明el:“body”？只是一个疑问。。我听说“el”的默认值是DIV tag，那么为什么要声明el:“#test”？我已经提到了创建视图的两种方法。首先，您需要创建一个抽象视图，以便可以在任何地方动态渲染它。其次，您有一个预定义的占位符来渲染它。你说得对。el的默认值为DIV，但当选定el不在DOM中时，它无法渲染并附加到DOM。因此el引用必须引用现有的DOM元素以进行内联渲染。如果未定义现有的DOM元素，则可以动态呈现视图，但不显示视图，并且可以手动将其附加到预呈现的元素（占位符）。很抱歉再次询问相同的查询。。我真正的疑问是：如果“el”的默认值是DIV-tag，我猜DIV-tag将只在DOM中，对吗？？那么，如果我们不指定“el”值，为什么不显示呢？请理解我的查询…所有视图在任何时候都有一个DOM元素（el属性），不管它们是否已经插入到页面中。通过这种方式，视图可以在任何时候呈现，并一次插入到DOM中，以便以尽可能少的回流和重新绘制获得高性能的UI呈现。此.el是从视图的标记名、类名、id和属性（如果指定）创建的。如果不是，el是一个空div（来自主干站点），在我看来，您已经混淆了，beacase div是标记名not el的默认值。一般来说，你有两种选择。1.为现有DOM元素定义el。2.为尚不可用的dom元素定义标记名、类名和id。所以主干创建的div为空，因为您没有指定el。您应该知道的下一个重要提示是html元素应该附加到DOM以获得可见性。DOM元素必须附加到DOM树。