骨幹事件和元素

我在應用程序中有兩個元素（輸入）。當我dbl點擊它時，我想能夠編輯該元素。出於某種原因，當我編輯第一個輸入時，它會編輯這兩個值。顯然，我不瞭解某些事情，不管是事件還是事件，或者兩者兼而有之。謝謝你的幫助。骨幹事件和元素

$(function(){ 

    var AddressBook = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
     name: "No contact name provided", 
     email: "No email address provided" 
     }; 
    }, 
    }); 

    var AddressBookList = Backbone.Collection.extend({ 
    model: AddressBook, 
    localStorage: new Backbone.LocalStorage("address-book") 
    }); 

    AddressBookList.comparator = function(entry) { 
    return AddressBookList.get("name"); 
    }; 

    var AddressBookEntries = new AddressBookList; 

    var AddressBookView = Backbone.View.extend({ 
    tagName: "li", 
    template: _.template($('#item-template').html()), 
    events: { 
     "click .toggle" : "toggleDone", 
     "dblclick .name" : "edit", 
     "dblclick .email" : "edit", 
     "click a.destroy" : "clear", 
     "keypress .edit" : "updateOnEnter", 
     "blur .edit"  : "close" 
    }, 

    // The TodoView listens for changes to its model, re-rendering. Since there's 
    // a one-to-one correspondence between a **Todo** and a **TodoView** in this 
    // app, we set a direct reference on the model for convenience. 
    initialize: function() { 
     this.listenTo(this.model, 'change', this.render); 
     this.listenTo(this.model, 'destroy', this.remove); 
    }, 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     this.input = this.$('.edit'); 
     return this; 
    }, 

    // Toggle the `"done"` state of the model. 
    // toggleDone: function() { 
//  this.model.toggle(); 
//  }, 

    // Switch this view into `"editing"` mode, displaying the input field. 
    edit: function() { 
     console.log(this.$el); 
     this.$el.addClass("editing"); 
     this.input.focus(); 
    }, 

    // Close the `"editing"` mode, saving changes to the todo. 
    close: function() { 
     var value = this.input.val(); 
     if (!value) { 
     this.clear(); 
     } else { 
     this.model.save({name: value, email: value}); 
     this.$el.removeClass("editing"); 
     } 
    }, 

    // If you hit `enter`, we're through editing the item. 
    updateOnEnter: function(e) { 
     if (e.keyCode == 13) this.close(); 
    }, 

    // Remove the item, destroy the model. 
    clear: function() { 
     this.model.destroy(); 
    } 

    }); 

    var AppView = Backbone.View.extend({ 

    el: $("#address-book"), 
    events: { 
     "click #save-entry": "createAddressBookEntry", 
     "click #clear-completed": "clearCompleted", 
     "click #toggle-all": "toggleAllComplete" 
    }, 

    initialize: function() { 

     this.input = this.$("#save-entry"); 
     this.listenTo(AddressBookEntries, 'add', this.addOne); 
     this.listenTo(AddressBookEntries, 'reset', this.addAll); 
     this.listenTo(AddressBookEntries, 'all', this.render); 

     this.footer = this.$('footer'); 
     this.main = $('#main'); 

     AddressBookEntries.fetch(); 
    }, 

    render: function() { 
     if (AddressBookEntries.length) { 
     this.main.show(); 
     } else { 
     this.main.hide(); 
     } 
    }, 

    addOne: function(entry) { 
     var view = new AddressBookView({model: entry}); 
     this.$("#contact-list").append(view.render().el); 
    }, 

    addAll: function() { 
     AddressBookEntries.each(this.addOne, this); 
    }, 

    createAddressBookEntry: function(e) { 
     var entry = AddressBookEntries.create({name: $("#name").val(), email: $("#email").val()}); 
     $("#email").val(''); 
     $("#name").val(''); 
    }, 
    }); 

    var App = new AppView; 

}); 


<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Backbone.js Todos</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
    <link rel="stylesheet" href="css/narrowJumbotron.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
    <link rel="stylesheet" href="css/app.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
</head> 

<body> 

    <div class="container"> 
      <div class="header"> 
      <ul class="nav nav-pills pull-right"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      <h3 class="text-muted">Address Book</h3> 
      </div> 

      <div class="jumbotron"> 
      <h1>Jumbotron heading</h1> 
      <p class="lead"></p> 
      <p><a class="btn btn-lg btn-success" href="#">Sign up today</a></p> 
      </div> 

      <div class="row marketing"> 
      <div class="col-lg-6"> 
       <div id="address-book"> 

        <header> 
        <input id="name" type="text" placeholder="Name"> 
        <input id="email" type="text" placeholder="Email"> 
        <a id="save-entry" class="btn btn-lg btn-success" href="#">Save</a> 
        </header> 

        <section id="main"> 
        <ul id="contact-list"></ul> 
        </section> 
       </div> 

      </div> 
     </div> 
    </div> 

    <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/underscore.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/backbone.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/backbone.localStorage-min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script> 

    <!-- Templates --> 

    <script type="text/template" id="item-template"> 
    <input class="name edit" type="text" value="<%- name %>" /> 
    <input class="email edit" type="text" value="<%- email %>" /> 
    </script> 

    </body> 
</html>

來源

2013-09-16 isea

您的每個輸入是否都有編輯類？試試這個...

close: function(e) { 
    var $self = $(e.currentTarget); 
    var value = $self.val(); 

    if ($.trim(value)) { 
    this.clear(); 
    } else { 

    if ($self.hasClass('name')) { 
     this.model.save({name: value}); 
    } else { 
     this.model.save({email: value}); 
    } 

    this.$el.removeClass("editing"); 
    } 
},

來源

2013-09-16 19:02:14 mikekavouras

是的，這似乎工作儘可能編輯正確的領域。當我點擊第一個字段時，光標跳到第二個字段，我仍然遇到問題。有任何想法嗎？ – isea

沒關係我擁有它。我只將currentTarget應用於編輯方法 – isea

骨幹事件和元素

回答

相關問題