Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

renamed w-preserve to no-update #177

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

renamed w-preserve to no-update #177

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions docs/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,12 +373,12 @@ Sometimes it is important to _not_ re-render a DOM subtree. This may due to eith
- DOM nodes contains externally provided content
- DOM nodes have internal state that needs to be maintained

Marko Widgets allows DOM nodes to be preserved by putting a special `w-preserve`, `w-preserve-if(<condition>)`, `w-preserve-body` or `w-preserve-body-if(<condition>)` attribute on the HTML tags that should be preserved. Preserved DOM nodes will be reused and re-inserted into a widget's newly rendered DOM automatically.
Marko Widgets allows DOM nodes to be preserved by putting a special `no-update`, `no-update-if(<condition>)`, `no-update-body` or `no-update-body-if(<condition>)` attribute on the HTML tags that should be preserved. Preserved DOM nodes will be reused and re-inserted into a widget's newly rendered DOM automatically.

```xml
<div w-bind>

<span w-preserve>
<span no-update>
<p>
The root span and all its children will never
be re-rendered.
Expand All @@ -387,26 +387,26 @@ Marko Widgets allows DOM nodes to be preserved by putting a special `w-preserve`
Rendered at ${Date.now()}.
</p>
</span>
<div w-preserve-body>
<div no-update-body>
Only the children of the div will preserved and
the outer HTML div tag will be re-rendered.
</div>

Don't rerender the search results if no search results
are provided.
<app-search-results items="data.searchResults"
w-preserve-if(data.searchResults == null)/>
no-update-if(data.searchResults == null)/>
</div>
```

## Preserving DOM Attributes during Re-render

Similar to preserving DOM nodes, Marko Widgets also makes it possible to preserve specific attributes on a DOM node. This can be helpful if a separately library is modifying DOM attributes and those changes should be preserved during a rerender. This is mostly the case with `class` and `style` attributes when using a animation/tweening engines such as [Velocity.js](http://julian.com/research/velocity/) or [GSAP](http://greensock.com/gsap).

The `w-preserve-attrs` attribute can be applied to any DOM element and it expects a comma-separated list of attribute names as shown below:
The `no-update-attrs` attribute can be applied to any DOM element and it expects a comma-separated list of attribute names as shown below:

```xml
<div w-preserve-attrs="class,style">
<div no-update-attrs="class,style">
...
</div>
```
```