Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[0.9] "dom-if" not binding to an object's boolean property #1606

Closed
zerodevx opened this issue May 25, 2015 · 2 comments
Closed

[0.9] "dom-if" not binding to an object's boolean property #1606

zerodevx opened this issue May 25, 2015 · 2 comments

Comments

@zerodevx
Copy link

Hi,

From the Polymer dom-if docs on Data Binding Helper Elements, (btw, the <script> tags should be placed outside and after the <dom-module>)

<dom-module id="user-page">

  <template>

    All users will see this:
    <div>{{user.name}}</div>

    <template is="dom-if" if="{{user.isAdmin}}">
      Only admins will see this.
      <div>{{user.secretAdminStuff}}</div>
    </template>

  </template>

  <script>
    Polymer({
      is: 'user-page',
      properties: {
        user: Object
      }
    });
  </script>

</dom-module>

I can't seem to get this to work. Consider the following,

test-pages.html

  <link rel="import" href="/bower_components/polymer/polymer.html">

  <dom-module id="test-pages">
    <template>
      <template is="dom-if" if="{{pages.page1}}">Page ONE</template>
      <template is="dom-if" if="{{pages.page2}}">Page TWO</template>
      <template is="dom-if" if="{{page3}}">Page THREE</template>
    </template>
  </dom-module>
  <script>
    Polymer({
      is: "test-pages",
      properties: {

        pages: {
          type: Object,
          value: function () { return {

              "page1": false,
              "page2": false

          }; }
        },

        page3: {
          type: Boolean,
          value: false
        }

      }
    });
  </script>

index.html

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="/elements/test-pages.html">
</head>

<body class="fullbleed">

  <test-pages></test-pages>

  <script>      
    var app = {};
    document.addEventListener("WebComponentsReady", function (e) {
      app = document.querySelector("test-pages");

      // These do not work:
      app.pages.page1 = true;
      app.pages.page2 = true;

      // However, this works:
      app.page3 = true;

    });
  </script>

</body>
</html>

It seems that dom-if cannot be bounded to an object's boolean property? (or am I misunderstanding something?)

Thanks so much,
Jason
@arthurevans
Copy link

The dom-if doesn't get notified that the value has changed, because you're changing it imperatively. Polymer creates accessor methods for direct properties (like page3), so it can monitor changes. But subproperties are different. See:

https://www.polymer-project.org/0.9/docs/devguide/data-binding.html#path-binding

In particular:

"For a path binding to update, the path value must be updated in one of the following ways:

  • Using a Polymer property binding to another element.
  • Using the set API, which provides the required notification to elements with registered interest."

In this case, you could do:

app.set('pages.page2', true);

Script tags can actually be placed inside or outside the dom-module, but the doc is inconsistent about this, and should be fixed.

@zerodevx
Copy link
Author

Hi @arthurevans,

Thank you for taking the time to concisely point this out to me. Really love what you guys are doing with Polymer - seems like you folks don't sleep at all!

Cheers,
Jason

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@arthurevans @zerodevx