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.

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

View: error with nested views using the same selector #358

Closed
c-frater opened this Issue Dec 14, 2016 · 0 comments

Comments

Projects
None yet
2 participants
@c-frater
Copy link
Contributor

c-frater commented Dec 14, 2016

Context

When building a recursive nested structure for a sitemap, I was using the same selector for the view in the top level as in the nested level(s) without re-creating the entire structure every time.

When calling apply the first time, the structure is built correctly.

Subsequent calls then populate nested content with items from the parent level.

Expected Behavior

Nested views using the same class should not affect or be affected by parent views.

Actual Behavior

Nested views are populated correctly the first time in but subsequent calls cause the structure to be changed.

Possible Fix

Use shallowSelectAll instead of selectAll inside the view

Steps to Reproduce

Complete example:

const hx = window.hx

function enter () {
  const sel = hx.div('child')

  const children = createView()

  const text = hx.span()

  sel.style('border', '1px solid blue')
    .add(text)
    .add(hx.div('hx-group hx-horizontal')
      .add(hx.section.fixed())
      .add(children))

  sel.api({
    update: (item) => {
      text.text(item.text)
      children.api().update(item.children || [])
    }
  })
  return this.append(sel).node()
}

function update (item, elem) {
  hx.select(elem).api().update(item)
}

function createView () {
  const sel = hx.div('container hx-section')

  const viewDiv = hx.div('view')
  const view = viewDiv.view('.child')
    .enter(enter)
    .update(update)

  sel.api({
    update: (items) => {
      view.apply(items)
    }
  })

  return sel
    .add(viewDiv)
}

const view = createView()

const items = [
  {
    text: 'Item 1',
    children: [
      {
        text: 'Replaced with item 2 on second call'
      }
    ]
  },
  {
    text: 'Item 2'
  }
]

function updateView () {
  view.api().update(items)
}

const updateButton = hx.div('hx-btn hx-action').text('Apply Items')
  .on('click', updateView)

updateView()

hx.select('body').clear()
  .add(hx.div('hx-group hx-vertical')
    .add(hx.section()
      .add(updateButton))
    .add(view))

@c-frater c-frater self-assigned this Jan 4, 2017

@c-frater c-frater added the In Progress label Jan 4, 2017

@c-frater c-frater referenced this issue Jan 4, 2017

Merged

#358 view bugfix #364

6 of 6 tasks complete

@c-frater c-frater added In Review and removed In Progress labels Jan 4, 2017

@jmsmyth jmsmyth closed this in #364 Jan 9, 2017

jmsmyth added a commit that referenced this issue Jan 9, 2017

@jmsmyth jmsmyth removed the In Review label Jan 9, 2017

c-frater added a commit that referenced this issue Mar 20, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment