github/meteor
1
1
Fork 0
mirror of https://github.com/meteor/meteor.git synced 2026-05-02 03:01:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Replace or reword references to Meteor.ui

Browse Source
This commit is contained in:
Nick Martin
2012-08-29 17:59:29 -07:00
parent ee3bd696fe
commit c839cc137c
2 changed files with 23 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/client/api.html
View File

@@ -500,7 +500,7 @@ those changes may or may not appear in the result set.
Cursors are a reactive data source. The first time you retrieve a
cursor's documents with `fetch`, `map`, or `forEach` inside a
reactive context (eg, [`Meteor.ui.render`](#meteor_ui_render),
reactive context (eg, [`Meteor.render`](#meteor_render),
[`Meteor.autosubscribe`](#meteor_autosubscribe), Meteor will register a
dependency on the underlying data. Any change to the collection that
changes the documents in a cursor will trigger a recomputation. To
@@ -606,23 +606,6 @@ Example:
// Delete all the log entries
Logs.remove({});
// Show a list of posts that have been flagged, updating in realtime.
// Put a link next to each post that deletes the post if clicked.
var frag = Meteor.ui.render(function() {
return Meteor.ui.listChunk(
Posts.find({flagged: true}),
function (post) {
// In real code it'd be necessary to sanitize post.name
return "<div>" + post.name +
" <span class='delete'>Delete</span></div>";
},
{ events: {
'click .delete': function () {
Posts.remove(this._id);
}
}});
});
document.body.appendChild(frag);
<h2 id="meteor_collection_cursor"><span>Cursors</span></h2>
@@ -658,7 +641,7 @@ the matching documents.
// Display a count of posts matching certain criteria. Automatically
// keep it updated as the database changes.
var frag = Meteor.ui.render(function () {
var frag = Meteor.render(function () {
var high_scoring = Posts.find({score: {$gt: 10}});
return "<p>There are " + high_scoring.count() + " posts with " +
"scores greater than 10</p>";
@@ -855,7 +838,7 @@ See [`Meteor.deps`](#meteor_deps) for another example.
Example:
Session.set("enemy", "Eastasia");
var frag = Meteor.ui.render(function () {
var frag = Meteor.render(function () {
return "<p>We've always been at war with " +
Session.get("enemy") + "</p>";
});

47
docs/client/concepts.html
View File

@@ -189,7 +189,7 @@ application with error-prone logic.
These Meteor functions run your code in a reactive context:
* [`Meteor.ui.render`](#meteor_ui_render) and [`Meteor.ui.chunk`](#meteor_ui_chunk)
* [`Meteor.render`](#meteor_render) and [`Meteor.renderList`](#meteor_renderlist)
* [`Meteor.autosubscribe`](#meteor_autosubscribe)
* [Templates](#templates)
@@ -220,7 +220,7 @@ generate it.
This optional feature works with any HTML templating library, or even
with HTML you generate manually from Javascript. Here's an example:
var fragment = Meteor.ui.render(
var fragment = Meteor.render(
function () {
var name = Session.get("name") || "Anonymous";
return "<div>Hello, " + name + "</div>";
@@ -229,25 +229,18 @@ with HTML you generate manually from Javascript. Here's an example:
Session.set("name", "Bob"); // page updates automatically!
[`Meteor.ui.render`](#meteor_ui_render) takes a rendering function,
that is, a function that returns some HTML as a string. It returns an
auto-updating `DocumentFragment`. When there is a change to data used
by the rendering function, it is re-run. The DOM nodes in the
`DocumentFragment` then update themselves in-place, no matter where
they were inserted on the page.
It's completely automatic. [`Meteor.ui.render`](#meteor_ui_render)
uses [reactive contexts](#reactivity) to discover what data is used by
the rendering function. From within
[`Meteor.ui.render`](#meteor_ui_render), you can use
[`Meteor.ui.chunk`](#meteor_ui_chunk) to customize how much of the
HTML is rerendered on a data change, or
[`Meteor.ui.listChunk`](#meteor_ui_listchunk) to efficiently track a
live database query.
[`Meteor.render`](#meteor_render) takes a rendering function, that is, a
function that returns some HTML as a string. It returns an auto-updating
`DocumentFragment`. When there is a change to data used by the rendering
function, it is re-run. The DOM nodes in the `DocumentFragment` then
update themselves in-place, no matter where they were inserted on the
page. It's completely automatic. [`Meteor.render`](#meteor_render) uses
[reactive contexts](#reactivity) to discover what data is used by the
rendering function.
Most of the time, though, you won't call these functions directly
&mdash; you'll just use your favorite templating package, such as
Handlebars or Jade. The `render` and `chunk` functions are intended
Handlebars or Jade. The `render` and `renderList` functions are intended
for people that are implementing new templating systems.
Meteor normally batches up any needed updates and executes them only
@@ -276,12 +269,12 @@ redrawn. The user could be in for a bumpy ride, as the focus, the
cursor position, the partially entered text, and the accented
character input state will be lost when the `<input>` is recreated.
This is another problem that Meteor solves automatically. Just make
sure that each of your focusable elements either has a unique `id`, or
has a `name` that is unique within the closest parent that has an
`id`. Meteor will preserve these elements even when their enclosing
template is rerendered, but will still update their children and copy
over any attribute changes.
This is another problem that Meteor solves for you. You can specify
elements to preserve when templates are re-rendered with the
[`preserve`](#tmpldecl_preserve) directive on the template. Meteor will
preserve these elements even when their enclosing template is
rerendered, but will still update their children and copy over any
attribute changes.
{{/better_markdown}}
</template>
@@ -325,9 +318,9 @@ function `Template.hello`, passing any data for the template:
This returns a string. To use the template along with the [`Live
HTML`](#livehtml) system, and get DOM elements that update
automatically in place, use [`Meteor.ui.render`](#meteor_ui_render):
automatically in place, use [`Meteor.render`](#meteor_render):
Meteor.ui.render(function () {
Meteor.render(function () {
return Template.hello({first: "Alyssa", last: "Hacker"});
})
=> automatically updating DOM elements
@@ -430,7 +423,7 @@ discussion.
<!-- in the console -->
> Session.set("weather", "cloudy");
> document.body.appendChild(Meteor.ui.render(Template.forecast));
> document.body.appendChild(Meteor.render(Template.forecast));
In DOM: <div>It'll be cloudy tonight</div>
> Session.set("weather", "cool and dry");