Dom Abstraction Issues

[michael.t...@gmail.com]

I started working on a journal application with eve yesterday, and ran into some significant issues with attempting to modularize my code, which I attempted to document in a gist: abstraction-issues.eve.md

[co...@kodowa.com]

Michael,

You could do something like this:

```
commit
  [#experience
    title: "Morning Meditation"
    interval: [#interval start: "7:15" end: "8:35"]]
  [#experience
    title: "Lunch"
    interval: [#interval start: "12:15" end: "13:15"]]

```

Time Formatter Component

```
search @browser
  time-view = [#time-view time]

bind @browser
  time-view <- [#span class: "time" text: time]

```

Interval Formatter Component

```
search @browser @session
  interval-display = [#interval-display interval]

bind @browser
  interval-display <- [#span children:
    [#time-view time: interval.start],
    [#span class: "divider" text: " - "],
    [#time-view time: interval.end]]

```

Experience List Root Component

```
search
  experience = [#experience title interval]

bind @browser
  [#div class: "experience-list" children:
    [#h3 text: "Experience List with full destructuring:"]
    [#div experience class: "experience" children:
      [#interval-display interval]
      [#span class: "divider" text: " : "]
      [#span text: title]]]

```

The key difference here is that wherever you want to insert a formatted interval, you just use the record [#interval-display interval]. The "Interval Formatter Component" searches for these and formats them for display using the values from interval. This is similar to how the clock-hand example works: http://play.witheve.com/#/examples/clock.eve

The difference between the two examples is that in the clock demo deconstructs the time record, whereas in this journal application, we are passing a reference to the interval record and then accessing its attributes directly. An important thing to recognize here is that we need to search the @session database to get access to those attributes, since that's where they are committed.

[michael.t...@gmail.com]

Ah, that's excellent! That also makes it possible to have a single #display tag, and do structural typing for components:

Time Formatter Component
```

search @browser @session

  time-display = [#display time]

bind @browser

  time-display <- [#span class: "time" text: time]

```

Interval Formatter Component
```

search @browser @session

  interval-display = [#display interval: [#interval start end]]

bind @browser

  interval-display <- [#span class: "interval" children:

    [#display time: start],

    [#span class: "divider" text: " - "],

    [#display time: end]]

```

Experience List Root Component
```

search

  experience = [#experience title interval]

bind @browser

  [#div class: "experience-list" children:

    [#h3 text: "Experience List:"]

    [#div experience class: "experience" children:

      [#display interval]

      [#span class: "divider" text: " : "]

      [#span text: title]]]
```

Very cool stuff 

[co...@kodowa.com]

Yeah, actually, I hadn't thought of that. Great idea!

[michael.t...@gmail.com]

I've run into some different issues in my journal example - 

* I implemented an add button that commits from a template, but it will only work once

* Afterwards, it will add a duplicate input element to the item it just created.

  - I replicated this error by pressing "escape" on an edit input in the todomvc

I figured I'd put these here instead of spamming the root of talk with my difficulties

[Brian Theado]

I didn't look at your code, but was able to duplicate the issue you
mentioned about todomvc.

Steps to reproduce:

1. Create a todo
2. Double click to edit
3. Make a change to the todo body
4. Hit the escape key
5. The one todo item will now have multiple bodies displayed

These two else clauses in the editing block are causing this behavior:

else if [#blur element: [#todo-editor todo value]]
then (todo, value, false, todo.completed)
else if [#keydown element: [#todo-editor todo] key: "escape"]
then (todo, todo.body, false, todo.completed)

The escape key is hit and the 2nd clause is triggered and the todo
gets committed with body = todo.body. But then the blur event will
also trigger and this time the todo gets committed with body = value.

I'm not sure what the correct fix is. The blur event can happen in 3
different cases: 1) after enter key is hit 2) after escape key is hit
3) after clicking outside the edit box

For #2 and #3 the edit should be cancelled and for #1 it should be accepted.

Maybe the fix is to update the [#todo-editor value] attribute to match
what was committed into the todo record.

> --
> You received this message because you are subscribed to the Google Groups
> "Eve talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to eve-talk+u...@googlegroups.com.
> To post to this group, send email to eve-...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/eve-talk/c35b7968-7f97-4b16-a33d-c6bb160e3920%40googlegroups.com.
>
> For more options, visit https://groups.google.com/d/optout.

[Brian Theado]

I looked at your code and for the issue of working only once, see the
discussion on this issue: https://github.com/witheve/Eve/issues/585.

If you add the click to your commit, then it should work

```
search @browser @event
click = [#click element: [new: [#experience]]]

search
not([#experience new])
[#experience/template title, interval]

commit
[#experience new: true, title, interval, click]
```

On Sat, Nov 26, 2016 at 12:50 AM, <michael.t...@gmail.com> wrote:

[michael.t...@gmail.com]

Thanks Brian, that was the issue - totally divorced from the todomvc issue

Because I was already adding and removing `new: true` for buffering, I was able to just
```
commit
  [#experience new: click, title, interval]
```
Removing `new` later doesn't impact the uniqueness

[michael.t...@gmail.com]

I spoke too soon - because the nested `[#interval]` and `[time-string]` are their own records, it's necessary to add `new` attributes to them to guarantee uniqueness. This leads to:
```

search @browser @event  

  new = [#click element: [new: [#experience]]]

search

  not([#experience new])

  [#experience/template title, interval: [#interval

    start: [time-string: start]

    end:   [time-string: end]]]

commit

  [#experience new, title, interval: [#interval new, 

    start: [new, time-string: start]

    end:   [new, time-string: end]]]
```
and then the subsequent

```

search

  experience = [#experience new]

search @buffers

  buffer = [#experience/editing]

commit @buffers

  buffer.experience := experience

commit

  experience.new := none

  experience.interval.new := none

  experience.interval.start.new := none

  experience.interval.end.new := none

```

[Brian Theado]

I copied these details into an issue on github:
https://github.com/witheve/Eve/issues/607