[Pkg-javascript-commits] [backbone] 29/74: Saving todo-in-editing on blur.
Jonas Smedegaard
js at moszumanska.debian.org
Sat May 3 16:59:06 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to tag 0.3.0
in repository backbone.
commit 4c5b74c4e6a4b18a4f57cec851a02db0a731c365
Author: Jeremy Ashkenas <jashkenas at gmail.com>
Date: Tue Oct 26 14:05:06 2010 -0400
Saving todo-in-editing on blur.
---
docs/todos.html | 16 ++++++++--------
examples/todos/todos.js | 16 ++++++++--------
2 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/docs/todos.html b/docs/todos.html
index 75f96db..46be9a8 100644
--- a/docs/todos.html
+++ b/docs/todos.html
@@ -33,7 +33,7 @@ GUID in the database. This generates the next order number for new items.</p>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>The TodoView listens for changes to its model, re-rendering. Since there's
a one-to-one correspondence between a <strong>Todo</strong> and a <strong>TodoView</strong> in this
app, we set a direct reference on the model for convenience.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
+ <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'close'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">view</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Re-render the contents of the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span><span class="o">:</span> <s [...]
@@ -44,19 +44,19 @@ app, we set a direct reference on the model for convenience.</p> </t
we use <code>jQuery.text</code> to set the contents of the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setContent</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'content'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.todo-content'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.todo-input'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.todo-input'</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'blur'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Toggle the <code>"done"</code> state of the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleDone</span><span class=" [...]
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toggle</span><span class="p">();</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>Switch this view into <code>"editing"</code> mode, displaying the input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ed [...]
- <span class="k">if</span> <span class="p">(</span><span class="nx">App</span><span class="p">.</span><span class="nx">openItem</span><span class="p">)</span> <span class="nx">App</span><span class="p">.</span><span class="nx">openItem</span><span class="p">.</span><span class="nx">closeEdit</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
- <span class="nx">App</span><span class="p">.</span><span class="nx">openItem</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>Close the <code>"editing"</code> mode, saving changes to the todo.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">closeEdit</spa [...]
- <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="nx">content</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".todo-input"</span><span class="p">).</span><span class="nx">val</span><span class="p">()});</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>Close the <code>"editing"</code> mode, saving changes to the todo.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">close</span><s [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="nx">content</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">()});</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
- <span class="k">delete</span> <span class="nx">App</span><span class="p">.</span><span class="nx">openItem</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <p>If you hit <code>enter</code>, we're through editing the item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">updateOnEnter</spa [...]
- <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">13</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">closeEdit</span><span class="p">();</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">13</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p>Remove the item, destroy the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clear</span><span class="o">:</span> <span cl [...]
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="p">}</span>
diff --git a/examples/todos/todos.js b/examples/todos/todos.js
index 8d47629..5819528 100644
--- a/examples/todos/todos.js
+++ b/examples/todos/todos.js
@@ -99,7 +99,7 @@ $(function(){
// 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() {
- _.bindAll(this, 'render');
+ _.bindAll(this, 'render', 'close');
this.model.bind('change', this.render);
this.model.view = this;
},
@@ -116,7 +116,9 @@ $(function(){
setContent: function() {
var content = this.model.get('content');
this.$('.todo-content').text(content);
- this.$('.todo-input').val(content);
+ this.input = this.$('.todo-input');
+ this.input.bind('blur', this.close);
+ this.input.val(content);
},
// Toggle the `"done"` state of the model.
@@ -126,21 +128,19 @@ $(function(){
// Switch this view into `"editing"` mode, displaying the input field.
edit: function() {
- if (App.openItem) App.openItem.closeEdit();
$(this.el).addClass("editing");
- App.openItem = this;
+ this.input.focus();
},
// Close the `"editing"` mode, saving changes to the todo.
- closeEdit: function() {
- this.model.save({content: this.$(".todo-input").val()});
+ close: function() {
+ this.model.save({content: this.input.val()});
$(this.el).removeClass("editing");
- delete App.openItem;
},
// If you hit `enter`, we're through editing the item.
updateOnEnter: function(e) {
- if (e.keyCode == 13) this.closeEdit();
+ if (e.keyCode == 13) this.close();
},
// Remove the item, destroy the model.
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/backbone.git
More information about the Pkg-javascript-commits
mailing list