Javascript 主干js事件内部调用查询_Javascript_Jquery_Backbone.js

Javascript 主干js事件内部调用查询

javascript jquery backbone.js

Javascript 主干js事件内部调用查询,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我这些天都在练习瑜伽。实际上，我对以下代码中的add和reset事件何时触发有一些疑问我实际上在实践这一准则：http://adrianmejia.com/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-2/ 代码如下： <html> <head> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/

我这些天都在练习瑜伽。实际上，我对以下代码中的

add

和

reset

事件何时触发有一些疑问

我实际上在实践这一准则：

http://adrianmejia.com/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-2/

代码如下：

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

<body>

<section id="todoapp">
    <header id="header">
        <h1>Todos</h1>
        <input id="new-todo" placeholder="what needs to be done?" />
    </header>
    <section id="main">
        <ul id="todo-list"></ul>
    </section>
</section>

<script type="text/template" id="item-template">
  <div class="view">
    <input class="toggle" type="checkbox">
    <label><%- description %></label>
  </div>
</script>


<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 app = {};

app.Todo = Backbone.Model.extend({
    defaults:{
        description: '',
        status:'incomplete'
    }
});


app.TodoList = Backbone.Collection.extend({
    model: app.Todo,
    url:'api/todos'
})
app.todoList = new app.TodoList();


app.TodoView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#item-template').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
})

app.AppView = Backbone.View.extend({
    el: '#todoapp',
    initialize: function(){
        this.input = this.$('#new-todo');

        this.listenTo(app.todoList,'add',this.addOne);
        this.listenTo(app.todoList,'sync',this.addAll);
        app.todoList.fetch();
    },
    events: {
        'keypress #new-todo': 'createTodoOnEnter'
    },
    addAll: function(){
        this.$('todo-list').html('');
        app.todoList.forEach(this.addOne,this);
    },
    addOne: function(todo){
        var view = new app.TodoView({model:todo});
        $('#todo-list').append(view.render().el);
    },
    createTodoOnEnter: function(e){
        if ( e.which !== 13 || !this.input.val().trim() ) { // ENTER_KEY = 13
          return;
        }
        app.todoList.create(this.newAttributes());
    },
    newAttributes: function(){
        return{
            description: this.input.val().trim(),
            status: 'incomplete'
        }
    }
});

var appView = new app.AppView();

</script>

</body>
</html>

场景2: 如果我在下面的代码中注释

reset

事件，请刷新页面，我可以在页面上看到我的服务器数据。为什么和如何？？内部发生了什么

    this.listenTo(app.todoList,'add',this.addOne);
//  this.listenTo(app.todoList,'reset',this.addAll);
    app.todoList.fetch();

以与上述相同的方式，请将

reset

替换为

sync

，输出将再次略有不同。如果有人尝试我上面的代码并自己检查输出，然后请解释事件是如何在内部调用的，我会很高兴。我已经查阅了Backbonejs.org文档中关于这些事件的内容，但是我仍然对这些事件调用行为感到困惑。

这没有帮助吗@Deeptechtons:嗨，实际上我也读了你提供的链接。。但如果您能详细解释一下内部调用的事件是如何发生的，我会很高兴。仅供参考：

reset

和

sync

不是同一个事件<代码>同步在您将集合与服务器同步时触发，而

重置

仅在调用

重置

方法时触发。因此，您不能使用

reset

而不是

sync

，反之亦然。如果您将其放在JSFIDLE中，则会有所帮助

    this.listenTo(app.todoList,'add',this.addOne);
//  this.listenTo(app.todoList,'reset',this.addAll);
    app.todoList.fetch();