Backbone et event doubleclick

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Backbone et event doubleclick

scribou

Bonjour à tous !

Je développe (en tout cas j'essaie) une application de téléphonie qui utilise une API qui marche avec Slim et backbone.js.

Là où j'en suis j'aimerais pouvoir faire un double clique sur une ligne de mon tableau, et qu'à la réaction de se double click, le champ devienne un input text.
Mon problème est le suivant, lorsque je clique, ce n'est pas seulement mon champ où j'ai cliqué qui se transforme en input text mais l'ensemble du tableau.
Le problème vient du fait que mon (this.$el) de ma fonction event est égal a l'ensemble du <div id ="contentComplement" ...> alors que j'aimerais que le addClass ne s'applique qu'au <td> concerné mais je ne sais pas comment faire.

Bref voici le code de app.js :

Code :

app_router.on('route:getInfoContact', function (UserId) {
var PhoneUserContact = Backbone.Model.extend();
var PhoneUserContactsCollection = Backbone.Collection.extend({
url: 'http://localhost/keyyo_app/trunk/api/application/index/phone_user/'+UserId+'/contact',
model: PhoneUserContact,
parse: function(ajaxdata) {
return ajaxdata.data;
}
});
var myPhoneUserContacts = new PhoneUserContactsCollection();
var PhoneUserContactsView = Backbone.View.extend({
el: '#contentComplement',
initialize:function(){
this.render();
myPhoneUserContacts.bind('sync', this.render, this);
myPhoneUserContacts.bind('reset', this.render, this);
myPhoneUserContacts.fetch();
},
render: function () {
var template = _.template($('#phoneUser-contacts-template').html(), {myPhoneUserContacts: myPhoneUserContacts.models});
this.$el.html(template);
this.input = this.$('.edit');
return this;
},
events: {
"dblclick .info" : "edit",
},
edit: function() {
console.log(this.$el);
this.$el.addClass("editing" );
this.input.focus;
console.log("Double Click" );
},
});
var phoneUserContactsView = new PhoneUserContactsView();
phoneUserContactsView.render();
});

Et voici le code du .html qui m'affiche mon tableau

Code :

<div id="contentComplement"></div>
<script type="text/template" id="phoneUser-contacts-template">
<table>
<thead>
<tr>
<th>Contacts</th>
</tr>
</thead>
<tbody>
<% _.each(myPhoneUserContacts, function(myPhoneUserContacts) { %>
<% _.each(myPhoneUserContacts.get('MAIL'), function(myPhoneUserMail) { %>
<tr id="list">
<td>
<div class ="info"><%= myPhoneUserMail.UsercValue%></div>
<input class="edit" type="text" value="<%= myPhoneUserMail.UsercValue%>">
</td>
</tr>
<% }); %>
<% _.each(myPhoneUserContacts.get('TEL'), function(myPhoneUserTel) { %>
<tr id="list">
<td>
<div class ="info"><%= myPhoneUserTel.UsercValue%></div>
<input class="edit" type="text" value="<%= myPhoneUserTel.UsercValue%>">
</td>
</tr>
<% }); %>
<% }); %>
</tbody>
</table>
</script>

Voila, l'erreur est peut etre simple, ou pas, mon code est peut etre horrible je sais pas trop étant donné que je débute avec backbone ..
Toujours est il que je suis bloqué sur ce point la !

Merci a ceux qui prendront le temps de lire et de m'aider !

Publicité

MaybeEijOrNot

but someone at least

Pourquoi $.el ?

scribou

Pour récupérer l'élément de ma page. Mais comme c'est pas celui que je voulais j'ai tenter de mettre en "dur" à base de table > td etc. mais ça ne marchait plus, alors j'ai remis $.el pour fournir un code qui fonctionne (pas comme je voudrais mais au moins il fonctionne ^^)

flo850

moi je

le plus simple dans backbone est de faire une vue globale PhoneUserContactsView qui contiendra une vue par ligne

Code :

var LineView = Backbone.View.extend({
     events:{
           "dblclick .info"  : "edit",
      }
     render:function(){
          //just the template of one line
      }  
             
      edit: function() {
           console.log(this.$el);
           this.$el.addClass("editing" );
           this.input.focus;
           console.log("Double Click" );
      },
})
 
var PhoneUserContactsView = Backbone.View.extend({
                el: '#contentComplement',
                initialize:function(){
                    this.subviews={};
                    this.render();
                    myPhoneUserContacts.bind('sync', this.render, this);
                    myPhoneUserContacts.bind('reset', this.render, this);
                    myPhoneUserContacts.fetch();
                },
                render: function () {
                    var template = _.template($('#phoneUser-contacts-template').html(), {myPhoneUserContacts: myPhoneUserContacts.models});
                    this.$el.html(template);
                     var tbody =this.$('tbody');
                     this.collection.each(function(contact){
                              this.subviews[contact.id] = new LineView ({model:contact});
                              this.subviews[contact.id].render();
                              tbody.append(this.subviews[contact.id].$el);
                      });
                    this.$('body').
                    this.input = this.$('.edit');
                    return this;
                },
               
               
            });

il faut faire attention a purger dtes sous vues lorsque tu détruit ta vue principale pour éviter les fuites de mémoire

Message édité par flo850 le 13-05-2014 à 11:04:55

---------------

scribou

Ok merci pour le conseil, j'en prend note !
Pour info (je sais pas si ça change quelque chose a ce conseil mais bon),
cette vue vient s'ajouter a deux autres déjà existante sur la page html.

Donc le code que tu m'as fourni je l'ai compris a peu près, et je l'ai récupérer, mais je ne vois pas ce que tu veux dire dans "//just the template of one line", concrètement je dois faire quoi a cet endroit ?
Et aussi, "this.subviews[contact.id]" est undefined (enfin this.subviews plus précisément) et comme je vois pas trop a quoi c'est censé correspondre je sais pas par quoi le remplacé ?

(j'ai remplacer this.collection.each par myPhoneUsersContacts parce que pareil, il était undefined sinon )

flo850

moi je

1/ la il faut juste que tu fasse le rendu d'une ligne ( donc tu extrait la template d'une ligne et tu lui files ton model)

2/
typo de ma part, à remplacer par

Code :

var self = this;
this.collection.each(function(contact){
                              self.subviews[contact.id] = new LineView ({model:contact});
                              self.subviews[contact.id].render();
                              tbody.append(self.subviews[contact.id].$el);
                      });

Message édité par flo850 le 13-05-2014 à 11:41:24

---------------

scribou

C'est modifier mais je n'arrive pas a modifier le html en conséquence, comme tu as pu le voir mon html gérait le boucle each et maintenant je ne vois pas comment l'adapter.
J'ai essayé avec des trucs comme <%- contact %> et pas mal d'autres chose mais rien trouver qui fonctionne malheureusement .
Et les deux templates doivent bien être l'un en dessous de l'autre, pas le deuxième dans le global ?

flo850

moi je

Un truc comme ça : (approximatif, je préfère utiliser mustache en moteur de template)

Code :

<script type="text/template" id="phoneUser-contacts-template">
<table>
<thead>
<tr>
<th>Contacts</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</script>
<script type="text/template" id="phoneUser-contacts-template-line">
<% _.each(myPhoneUserContacts.get('MAIL'), function(myPhoneUserMail) { %>
<tr id="list">
<td>
<div class ="info"><%= myPhoneUserMail.UsercValue%></div>
<input class="edit" type="text" value="<%= myPhoneUserMail.UsercValue%>">
</td>
</tr>
<% }); %>
<% _.each(myPhoneUserContacts.get('TEL'), function(myPhoneUserTel) { %>
<tr id="list">
<td>
<div class ="info"><%= myPhoneUserTel.UsercValue%></div>
<input class="edit" type="text" value="<%= myPhoneUserTel.UsercValue%>">
</td>
</tr>
<% }); %>
</script>

Code :

//dans line 
render: function () {
                    var template = _.template($('#phoneUser-contacts-template-line').html(), {myPhoneUserContacts: this.model});
                    this.input = this.$('.edit');
                    return this;
                },

Message édité par flo850 le 13-05-2014 à 13:23:47

---------------

scribou

Merci beaucoup de ton aide !
J'ai adapté le code ( il manquait "this.$el.html(template);" dans le render inline ^^')
Par contre le problème de départ est toujours la, lorsque je double clique, tout mes td deviennent des text input

EDIT:

Je pense que le problème est que le "this" contient un objet avec l'ensemble des input, alors que chaque input devrait être isolé ?

Message édité par scribou le 13-05-2014 à 14:31:48

FORUM HardWare.fr

Programmation

HTML/CSS

Backbone et event doubleclick

Sujets relatifs
backbone.js - vous en pensez quoi ?	{ASP.NET} Repeater et textbox text_changed event
javascript FONCTION EVENT SOUS IE ET FIREFOX	Boost state machine deferred event
<audio> jquery problème avec l'event ended	Passer div id sur une event onclick a du PHP
[Résolu] rappel création event agenda google	Destruction event JavaScript en mémoire
Event lost focus appelé en boucle	[RESOLU]KeyDown_Event - comment retourner une combinaison de touches
Plus de sujets relatifs à : Backbone et event doubleclick

Page générée en 0.130 secondes