rmosolgo / batman-react-trial Goto Github PK

I haven't looked deeply at your implementation but you are saying that you have issues knowing when to update the React component.

A common pattern used by Meteor and Vue.js is to replace every time you read a value by a getter. What you do is run the function, see all the values that have been accessed, do a diff of what has been accessed during the previous round and add/remove the listeners accordingly.

This way, you can have arbitrary javascript code running and still have precise data binding.

This is about code on the better-context branch.

I use data-showif to modify a descriptor's props.style.display:

    style = @descriptor.props.style || {}
    if shouldShow
      delete style.display
    else
      style.display = 'none !important'
    @descriptor.props.style = style

(full source)

Here's an example from animals/show:

  <p data-showif='animal.animalClass | eq "Mammal"'>
    Mammalian
  </p>
  <p data-showif='animal.animalClass | eq "Reptile"'>
    Reptilian
  </p>

It works on initial page load, but not on subsequent renders when the data has changed. For example, if I change T-Rex to Mammal, it should hide "Reptilian" and show `"Mammalian".

It looks like the transformation is applied. You can see display: none !important in the React plugin:

But it doesn't seem like the DOM is affected. Both elements are visible:

And in the chrome inspector, neither one has style.display: