co-dependent computed properties

[robdodson]

Hey I was just reading through your readme on co-dependent computed properties and thought you might want to check out the dynamic functions in bindings feature mentioned in the 1.3.0 release notes. https://github.com/Polymer/polymer/releases/tag/v1.3.0

It lets you setup a dependency for your computed bindings that then causes the computed bindings to execute when the dependency is fulfilled

[kbenjamin]

@robdodson Hi, Rob. Thanks for checking out my readme and thank you for the feedback. I'm happy to learn about better ways to resolve these issues or, hopefully, see them eliminated altogether.

Dynamic functions are a cool feature but I'm not quite sure how to use them to resolve co-dependencies better than simply including the dependencies in the computed property call. If it's a one-off sort of thing, then the technique might work, albeit at the cost of code complexity. If I'm missing something, please let me know.

Here's the real-world case that led to my write-up. I don't see how to resolve it using a dynamic function (I tried but quickly saw a situation of many functions being required):

<paper-icon-button hidden="{{getIconState('showSearch', showSearch, viewOnly, mode)}}" title="Search" icon="search" on-tap="onTap"></paper-icon-button>
<paper-icon-button hidden="{{getIconState('showAdd', showAdd, viewOnly, mode)}}" title="Add" icon="add" on-tap="onTap"></paper-icon-button>
<!-- 7 more like this --->

getIconState: function (key, value, viewOnly, mode) {
  if (value === false) {
    return true;
  } //is hidden because the attribute is not set i.e. option is unavailable

  var viewRE = /^(showAdd|showEdit)$/;
  var addRE = /^(showCancel|showSave)$/;
  var editRE = /^(showDelete|showCancel|showSave)$/;
  var bothRE = /^(showBack|showMenu|showSearch)$/;

  if (viewOnly === true && viewRE.test(key)) {
    return false; // not hidden - okay to show
  }
  if (viewOnly === false) {
    if (mode === 'add' && addRE.test(key)) {
      return false;
    } else if (mode !== 'add' && editRE.test(key)) {
      return false; // not hidden - okay to show
    }
  }
  return !bothRE.test(key);
}

showSearch, showAdd, (etc), viewOnly, and mode are all defined in properties. mode and viewOnly are the only values likely to change. mode is set externally by the router (page.js) and viewOnly is set internally i.e. when switching to editing a form.

[robdodson]

If it's a one-off sort of thing, then the technique might work, albeit at the cost of code complexity. If I'm missing something, please let me know.

I think it's intended to be more of a one off thing (waiting on a translation service to load in so you don't have to explicitly include it in all of your computed bindings). A computed binding is basically an observer so a lot of the trickery you have to do in observers to wait on dependencyA and dependencyB to both be defined applies to computed bindings as well.