Skip to content

Commit

Permalink
Update "twitter" example to eliminate inline function literals
Browse files Browse the repository at this point in the history
  • Loading branch information
SteveSanderson committed Dec 20, 2011
1 parent d5875b7 commit c0f3a84
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 8 deletions.
4 changes: 2 additions & 2 deletions examples/resources/twitterExample.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.configuration, .tweets, .tweets td { font-family: Verdana; font-size: 13px; }
.configuration { background-color: #DEDEDE; border: 2px solid gray; float:left; height: 40em; width: 40%; padding: 0.5em; border-right-width:0; }
.tweets { width: 55%; border: 2px solid gray; height: 40em; overflow: scroll; overflow-x: hidden; background-color: Black; color: White; padding: 0.5em; }
.tweets { width: 55%; border: 2px solid gray; height: 40em; overflow: scroll; overflow-x: hidden; background-color: Black; color: White; padding: 0.5em; position: relative; }
.tweets table { border-width: 0;}
.tweets tr { vertical-align: top; }
.tweets td { padding: 0.4em 0.3em 1em 0.4em; border-width: 0; }
Expand All @@ -24,4 +24,4 @@ input.invalid { border: 1px solid red !important; background-color: #FFAAAA !imp
.configuration form input { width:40%; font-size: 1.3em; border:1px solid silver; background-color: White; padding: 0.1em; }
.configuration form button { width: 20%; margin-left: 0.3em; height: 2em; }

.loadingIndicator { position: absolute; top: 0.1em; left: 0.1em; font: 0.8em Arial; background-color: #292; color: White; padding: 0.2em 0.5em 0.2em 0.5em; display: none; }
.loadingIndicator { position: absolute; top: 0.1em; left: 0.1em; font: 0.8em Arial; background-color: #229; color: White; padding: 0.2em 0.5em 0.2em 0.5em; display: none; }
16 changes: 10 additions & 6 deletions examples/twitter.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ This is a sophisticated example showing how many different features in Knockout
</style>

{% capture live_example_view %}
<div class='loadingIndicator'>Loading...</div>
<div class='configuration'>
<div class='listChooser'>
<button data-bind='click: deleteList, enable: editingList.name'>Delete</button>
Expand All @@ -28,7 +27,10 @@ This is a sophisticated example showing how many different features in Knockout
<p>Currently viewing <span data-bind='text: editingList.userNames().length'> </span> user(s):</p>
<div class='currentUsers' data-bind='with: editingList'>
<ul data-bind='foreach: userNames'>
<li><button data-bind='click: function() { $parent.userNames.remove($data) }'>Remove</button> <div data-bind="text: $data"> </div></li>
<li>
<button data-bind='click: $root.removeUser'>Remove</button>
<div data-bind="text: $data"> </div>
</li>
</ul>
</div>

Expand All @@ -39,6 +41,7 @@ This is a sophisticated example showing how many different features in Knockout
</form>
</div>
<div class='tweets'>
<div class='loadingIndicator'>Loading...</div>
<table width='100%' data-bind="foreach: currentTweets">
<tr>
<td><img data-bind='attr: { src: profile_image_url }' /></td>
Expand Down Expand Up @@ -87,6 +90,10 @@ This is a sophisticated example showing how many different features in Knockout
}
};

this.removeUser = function(userName) {
this.editingList.userNames.remove(userName)
}.bind(this);

this.saveChanges = function() {
var saveAs = prompt("Save as", this.editingList.name());
if (saveAs) {
Expand Down Expand Up @@ -140,10 +147,7 @@ This is a sophisticated example showing how many different features in Knockout

// The active user tweets are (asynchronously) computed from editingList.userNames
ko.computed(function() {
var currentTweets = this.currentTweets;
twitterApi.getTweetsForUsers(this.editingList.userNames(), function(data) {
currentTweets(data)
})
twitterApi.getTweetsForUsers(this.editingList.userNames(), this.currentTweets);
}, this);
};

Expand Down

0 comments on commit c0f3a84

Please sign in to comment.