pier-oliviert / observejs Goto Github PK

1. fires remote query twice or multiple times
2. code wrapped in (function(target ... nothing change to html

i disabled xhr in observejs.js.coffee & wiped application.js.erb to ->
<%= yield %>

than work fine

Not sure what I want to do, the previous version wasn't perfect.

As of this moment, ObserveJS has an issue when storing DOM elements into JavaScript object. The problem is simple: When the user uses the 'back' button, the browser reload the HTML but doesn't restore JavaScript objects. That means that every state you had stored is wiped clean.

One scenario where this breaks my flow is when I deal with multiple steps that do not require a roundtrip to the server. What I do is I render all the steps and when the matching class is instantiated, I remove the extra steps from the DOM and store it in a variable. Here's an example:

ObserveJS.bind 'Messages', class
  loaded: =>
    @confirmation = @element().querySelector('div.confirmation').remove()
    @on 'click', @element().querySelector('button'), @confirm

  confirm: (e) =>
    @element().appendChild @confirmation

This breaks as soon as you go back one page because the DOM doesn't have the confirmation element anymore and the class expect it to be there.

Templates to the rescue

The idea would be to use to store DOM elements that are unecessary at page load. It should be possible to store DOM inside the template from any place in Rails' view hierarchy. Convention > configuration and all that.

My guess would be to create a new helper or something similar that would allow such a feature. It would take a similar approach to how you bind a JS object to the DOM. Unless people needs more configuration, I think a good approach would be to bind a template to the class you are aiming for. This would make the declaration explicit and would also show the intent of that DOM element. It may not be obvious so here's an example:

<div as='Messages'>
  <section class='step'>
    <h2>First step. Select a user.</h2>
    <ul>
      <li>User 1</li>
    </ul>
  </section>

  <%= content_tag :template, for: 'Messages' do %>
    <section class='step'>
      <h2>Second step. Something!</h2>
    </section>
  <% end %>
</div>

ObserveJS.bind 'Messages', class
  loaded: =>
    @on 'click', @element().querySelector('button'), @show

  show: (e) =>
    @element().appendChild(@retrieve('section.step'))

For some reason a script tag cannot be build by using "<script>".toHTML().

The function returns a script but it seems like it's not a HTMLScriptElement.

https://developer.mozilla.org/en/docs/Web/HTML/Element/script

There's an issue where Joint would create an instance when another one is already binded to an element. Such event would happen when an element is removed from the DOM tree and then re-inserted at a later time.

The previous version was to add a @element().on() method. I'm not entirely sure if this is the right approach.

This is polluting HTMLElement and it doesn't have any advantage.

https://encrypted.google.com/search?hl=en&q=jointjs
http://www.jointjs.com/

Might want to rename to avoid confusion.

I have a branch that should test coverage most of the library but it can't be merge in master because no headless browser I have tried worked.

The issue is that none of them supports MutationObserver API and Ethereal is based off that. Even though all browser now supports it, emulators do not or other, like Phantomjs links against an old version of WebKit.