Avoid re-creating the member list elements on every change

diff --git a/client/assets/dev/model_member.js b/client/assets/dev/model_member.js
index 22fb2d6224264405a15dd51e7fea6162fb8d78f5..bc2fa60f9304aa63b26d6a1423f55a3f036e4fdf 100644 (file)
--- a/client/assets/dev/model_member.js
+++ b/client/assets/dev/model_member.js
@@ -32,6 +32,7 @@ _kiwi.model.Member = Backbone.Model.extend({
         this.sortModes(modes);\r
         this.set({"nick": nick, "modes": modes, "prefix": this.getPrefix(modes)}, {silent: true});\r
         this.isOp();\r
+        this.view = new _kiwi.view.Member({"model": this});\r
     },\r
     addMode: function (mode) {\r
         var modes_to_add = mode.split(''),\r

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index 1a763af5cd5c3f8e7ba21104c188c9c8af0356ae..11b2f9f305b6319a6c5ceb380e06377bf9facc5e 100644 (file)
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -1,5 +1,21 @@
 /*jslint white:true, regexp: true, nomen: true, devel: true, undef: true, browser: true, continue: true, sloppy: true, forin: true, newcap: true, plusplus: true, maxerr: 50, indent: 4 */\r
 /*global kiwi */\r
+_kiwi.view.Member = Backbone.View.extend({\r
+    tagName: "li",\r
+    initialize: function (options) {\r
+        this.model.bind('change', this.render, this);\r
+        this.render();\r
+    },\r
+    render: function () {\r
+        var $this = this.$el,\r
+            prefix_css_class = (this.model.get('modes') || []).join(' ');\r
+\r
+        $this.addClass('mode ' + prefix_css_class);\r
+        $this.html('<a class="nick"><span class="prefix">' + this.model.get("prefix") + '</span>' + this.model.get("nick") + '</a>');\r
+        $this.data('member', this.model);\r
+        return this;\r
+    }\r
+});\r
 \r
 _kiwi.view.MemberList = Backbone.View.extend({\r
     tagName: "ul",\r
@@ -11,20 +27,18 @@ _kiwi.view.MemberList = Backbone.View.extend({
         $(this.el).appendTo('#kiwi .memberlists');\r
     },\r
     render: function () {\r
-        var $this = $(this.el);\r
+        var $this = this.$el;\r
         $this.empty();\r
         this.model.forEach(function (member) {\r
-            var prefix_css_class = (member.get('modes') || []).join(' ');\r
-            $('<li class="mode ' + prefix_css_class + '"><a class="nick"><span class="prefix">' + member.get("prefix") + '</span>' + member.get("nick") + '</a></li>')\r
-                .appendTo($this)\r
-                .data('member', member);\r
+            $this.append(member.view.el);\r
         });\r
+        return this;\r
     },\r
     nickClick: function (event) {\r
         var $target = $(event.currentTarget).parent('li'),\r
             member = $target.data('member'),\r
             userbox;\r
-        \r
+\r
         event.stopPropagation();\r
 \r
         // If the userbox already exists here, hide it\r