CODEWITHSUNDEEP
meteor
delibalta
delibalta

Reputation: 298

Meteor template image redraw

I have a collection, that has fields; name, surname and image.

When i use it in #each loop, and when get new data, #each loop redraw images. "#isolate" not work for it.

Every new records come to page, images are redraw again.

<head>
  <title>image</title>
</head>

<body>
    {{> records}}
</body>

<template name="records">
    <table>
        {{#each records}}
        <tr>
            <td>{{name}}</td>
            <td>{{surname}}</td>
            <td><image src="/{{src}}" /></td>
        </tr>
        {{/each}}
  </table>  
</template>

How can i fix it?

Sorry for my english :)

Thanks everybody

Upvotes: 0

Views: 145

Answers (2)

Moritz Walter
Moritz Walter

Reputation: 717

If you totally want to get rid of any reactivity here, be sure to use {{#isolate}} correctly:

This will prevent re-render on (i.e.) records.insert(...);

<template name="records">
    <table>
        {{#isolate}}
        {{#each records}}
        <tr>
            <td>{{name}}</td>
            <td>{{surname}}</td>
            <td><image src="/{{src}}" /></td>
        </tr>
        {{/each}}
        {{#isolate}}
    </table>  
</template>

But this won't:

<template name="records">
    <table>
        {{#each records}}
        {{#isolate}}
        <tr>
            <td>{{name}}</td>
            <td>{{surname}}</td>
            <td><image src="/{{src}}" /></td>
        </tr>
        {{#isolate}}
        {{/each}}
    </table>  
</template>

Upvotes: 0

Pent
Pent

Reputation: 1049

You can fix this by separating the template into two. When they are separate, meteor will only update the record that has changed.

<template name="records">
    <table>
    {{#each records}}
      {{>record}}
    {{/each}}
    </table>  
</template>

<template name="record">
    <tr>
      <td>{{name}}</td>
      <td>{{surname}}</td>
      <td><image src="/{{src}}" /></td>
    </tr>
</template>

Upvotes: 1

Related Questions