# The view element and it's content are separate in HTML

**URL:** <https://discuss.emberjs.com/t/the-view-element-and-its-content-are-separate-in-html/4073>\
**Category:** Uncategorized\
**Created:** [February 5, 2014, 4:30pm UTC](https://discuss.emberjs.com/t/the-view-element-and-its-content-are-separate-in-html/4073 "2014-02-05T16:30:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kceiw](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kceiw](https://discuss.emberjs.com/u/kceiw)\
**Post date:** [February 5, 2014, 4:30pm UTC](https://discuss.emberjs.com/t/the-view-element-and-its-content-are-separate-in-html/4073/1 "2014-02-05T16:30:30Z")

</div>

Hi, I create a component.

```
    <script type="text/x-handlebars" data-template-name="components/tree-grid-row">
    <tr {{bind-attr class="isShown:grid-row:grid-row-hide isSelected:grid-row-selected"}}
        {{action "select" on="click"}}>
        <td {{bind-attr class=":grid-cell"}}>
            <div {{bind-attr class=":expansion-cell" style="left_margin"}}>
                <div {{bind-attr class="hasChildren:show-tree-operation:hide-tree-operation"}}>
                    {{tree-grid-expand-icon isExpanded=isExpanded
                        action="toggleExpansion"}}
                </div>
                <div {{bind-attr class=":expansion-cell-content"}}>
                    {{row.name}}
                </div>
            </div>
        </td>
        <td {{bind-attr class=":grid-cell"}}>{{row.detail}}</td>
    </tr>
</script>

```

And use it here

```
            {{#each row in rows}}
   {{tree-grid-row row=row action="toggleRowChildren"}}
{{/each}}

```

And I found the resulting HTML is problematic.

```
    <div>
   <div id="ember386" class="ember-view"> </div>
   <div id="ember395" class="ember-view"> </div>
   <div id="ember398" class="ember-view"> </div>
   <table class="grid-table">
       <thead class="grid-header">
       <tbody>
         <script id="metamorph-8-start" type="text/x-placeholder">
         <script id="metamorph-5-start" type="text/x-placeholder">
         <tr class="grid-row" data-ember-action="4" data-bindattr-3="3">
         <script id="metamorph-5-end" type="text/x-placeholder">
         <script id="metamorph-6-start" type="text/x-placeholder">
         <tr class="grid-row-hide" data-ember-action="13" data-bindattr-12="12">
         <script id="metamorph-6-end" type="text/x-placeholder">
         <script id="metamorph-7-start" type="text/x-placeholder">
         <tr class="grid-row-hide" data-ember-action="22" data-bindattr-21="21">
         <script id="metamorph-7-end" type="text/x-placeholder">
         <script id="metamorph-8-end" type="text/x-placeholder">
       </tbody>
    </table>
</div>

```

Three view elements are created (“ember386”, “ember3965”, “ember398”). But they’re not inline in the element tbody and the element such as `<tr class="grid-row" data-ember-action="4" data-bindattr-3="3">` isn’t inline in the view element either. This leads to a problem of updating the view. I’ve encountered a problem when I update the property “isShown”. The property is updated correctly in the component’s Javascript code, but it’s not reflected in the tempalte. When I debugged, I found that ember tries to look up the element like “data-bindattr-12” from the view “ember395” and nothing is found. So the view isn’t actually updated.

It seems to me that the HTML should look like:

```
<div>
   <table class="grid-table">
       <thead class="grid-header">
       <tbody>
         <script id="metamorph-8-start" type="text/x-placeholder">
         <script id="metamorph-5-start" type="text/x-placeholder">
         <div id="ember386" class="ember-view">
             <tr class="grid-row" data-ember-action="4" data-bindattr-3="3">
         </div>
         <script id="metamorph-5-end" type="text/x-placeholder">
         <script id="metamorph-6-start" type="text/x-placeholder">
         <div id="ember395" class="ember-view">
         <tr class="grid-row-hide" data-ember-action="13" data-bindattr-12="12">
         </div>             
         <script id="metamorph-6-end" type="text/x-placeholder">
         <script id="metamorph-7-start" type="text/x-placeholder">
         <div id="ember398" class="ember-view">
             <tr class="grid-row-hide" data-ember-action="22" data-bindattr-21="21">
         </div>
         <script id="metamorph-7-end" type="text/x-placeholder">
         <script id="metamorph-8-end" type="text/x-placeholder">
       </tbody>
    </table>
</div>

```

At least, when I try to show other component, the view element and its contents are all inline.

Does anybody encounter such problems? And how to solve it?

A complete code is at [https://github.com/kceiw/treegrid-emberjs](https://github.com/kceiw/treegrid-emberjs) All templates are in index.html and components are in js/components

---

<div class="post-metadata">

**Author:** ![lookingsideways](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lookingsideways/32/13652_2.png) [@lookingsideways](https://discuss.emberjs.com/u/lookingsideways)\
**Post date:** [February 5, 2014, 5:16pm UTC](https://discuss.emberjs.com/t/the-view-element-and-its-content-are-separate-in-html/4073/2 "2014-02-05T17:16:47Z")

</div>

I think the HTML is actually being output as per your last example but the browser is reorganising it because it’s invalid HTML.

Have you tried setting the element directly in the component? Eg:

```javascript
DemoApp.TreeGridRowComponent = Ember.Component.extend({
    tagName: 'tr',
    classNameBindings: ['isShown:grid-row:grid-row-hide', 'isSelected:grid-row-selected'],

    actions: {
        click: function () {
            //window.alert("select row.");
        }
    }

    ...
});

```

```nohighlight
<script type="text/x-handlebars" data-template-name="components/tree-grid-row">
    <td {{bind-attr class=":grid-cell"}}>
        <div {{bind-attr class=":expansion-cell" style="left_margin"}}>
            <div {{bind-attr class="hasChildren:show-tree-operation:hide-tree-operation"}}>
                {{tree-grid-expand-icon isExpanded=isExpanded
                    action="toggleExpansion"}}
            </div>
            <div {{bind-attr class=":expansion-cell-content"}}>
                {{row.name}}
            </div>
        </div>
    </td>
    <td {{bind-attr class=":grid-cell"}}>{{row.detail}}</td>
</script>

```

That should avoid the extra wrapping divs.

---

<div class="post-metadata">

**Author:** ![kceiw](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kceiw](https://discuss.emberjs.com/u/kceiw)\
**Post date:** [February 6, 2014, 7:29am UTC](https://discuss.emberjs.com/t/the-view-element-and-its-content-are-separate-in-html/4073/3 "2014-02-06T07:29:03Z")

</div>

Thank you. That woks. Does it mean that a view/compoenent is always in a

 if tagName is not specified? I’m surprised that browser will re-organize the elements.

---

<div class="post-metadata">

**Author:** ![lookingsideways](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lookingsideways/32/13652_2.png) [@lookingsideways](https://discuss.emberjs.com/u/lookingsideways)\
**Post date:** [February 6, 2014, 3:01pm UTC](https://discuss.emberjs.com/t/the-view-element-and-its-content-are-separate-in-html/4073/4 "2014-02-06T15:01:39Z")

</div>

Yes, if it’s not specified then the template contents will always be wrapped in a div.