Data binding vs. event handling

request-data-binding1.html

<dom-module id="request-data-binding1">
  <template>
    <discovery-api-elements
      name="plus" version="v1"></discovery-api-elements>

    <google-signin
      client-id="..."
      scopes="..."
      is-authorized="{{isAuthorized}}"></google-signin>

    <plus-activities-list
      user-id="me"
      collection="public"
      on-success="_handleResponse"
      auto$="[[isAuthorized]]"></plus-activities-list>

    <template is="dom-repeat" items="[[activities]]">
      <span>[[item.published]]</span> <a href$="[[item.url]]">[[item.title]]</a><br>
    </template>
  </template>
  
  <script>
    (function () {
      Polymer({
        is: "request-data-binding1",
  
        properties: {
          isAuthorized: Boolean,
          activities: Array
        },
  
        _handleResponse: function (e) {
          this.activities = e.detail.items;
        }
      });
    }());
  </script>
</dom-module>

request-data-binding2.html

<dom-module id="request-data-binding2">
  <template>
    <discovery-api-elements
      name="plus" version="v1"></discovery-api-elements>

    <google-signin
      client-id="..."
      scopes="..."
      is-authorized="{{isAuthorized}}"></google-signin>

    <plus-activities-list
      user-id="me"
      collection="public"
      response="{{response}}"
      auto$="[[isAuthorized]]"></plus-activities-list>

    <template is="dom-repeat" items="[[activities]]">
      <span>[[item.published]]</span> <a href$="[[item.url]]">[[item.title]]</a><br>
    </template>
  </template>
  
  <script>
    (function () {
      Polymer({
        is: "request-data-binding2",
  
        properties: {
          isAuthorized: Boolean,
          response: Object,
          activities: {
            type: Array,
            computed: '_parseActivities(response, isAuthorized)'
          }
        },
  
        _parseActivities: function (response, isAuthorized) {
          if (!isAuthorized || !response) { return []; }
          // you could do any preprocessing of the data here
          return response.items;
        }
      });
    }());
  </script>
</dom-module>

request-event-handling.html

<dom-module id="request-event-handling">
  <template>
    <discovery-api-elements
      name="plus" version="v1"></discovery-api-elements>

    <google-signin
      client-id="..."
      scopes="..."
      is-authorized="{{isAuthorized}}"></google-signin>

    <plus-activities-list
      id="listRequest"
      user-id="me"
      collection="public"
      on-success="_handleResponse"></plus-activities-list>

    <template is="dom-repeat" items="[[activities]]">
      <span>[[item.published]]</span> <a href$="[[item.url]]">[[item.title]]</a><br>
    </template>
  </template>
  
  <script>
    (function () {
      Polymer({
        is: "request-event-handling",
  
        properties: {
          isAuthorized: {
            type: Boolean,
            observer: "_authorizedChanged"
          },
          activities: Array
        },
  
        _authorizedChanged: function (isAuthorized) {
          if (!isAuthorized) {
            this.activities = [];
            return;
          }
          // Trigger the API request
          this.$.listRequest.go();
        },
        
        _handleResponse: function (e) {
          this.activities = e.detail.items;
        }
      });
    }());
  </script>
</dom-module>

signin-data-binding.html

<dom-module id="signin-data-binding">
  <template>
    <google-signin
      client-id="..."
      scopes="..."
      is-authorized="{{isAuthorized}}"></google-signin>

    <div hidden$="[[!isAuthorized]]">Signed in as <span>{{user.name}}</span></div>
  </template>

  <script>
    Polymer({
      is: 'signin-data-binding',

      properties: {
        user: {
          type: Object,
          computed: '_computeUser(isAuthorized)'
        },
        isAuthorized: Boolean
      },

      _computeUser: function (isAuthorized) {
        if (!isAuthorized) { return undefined; }
        var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile();
        return {
          id: profile.getId(),
          name: profile.getName(),
          image: profile.getImageUrl()
        };
      }
    });
  </script>
</dom-module>

signin-event-handling.html

<dom-module id="signin-event-handling">
  <template>
    <google-signin
      client-id="..."
      scopes="..."
      on-google-signin-success="_handleSignin"
      on-google-signed-out="_handleSignout"></google-signin>

    <div hidden$="[[!isAuthorized]]">Signed in as <span>{{user.name}}</span></div>
  </template>
  
  <script>
    Polymer({
      is: 'signin-event-handling'

      properties: {
        user: Object,
        isAuthorized: Boolean
      },

      _handleSignin: function () {
        var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile();
        this.isAuthorized = true;
        this.user = {
          id: profile.getId(),
          name: profile.getName(),
          image: profile.getImageUrl()
        };
      },

      _handleSignout: function () {
        this.user = undefined;
        this.isAuthorized = false;
      }
    });
  </script>
</dom-module>