How does all the effect binding between components and built-in elements (as I am currently wrestling with the age-slider.html example in "Polymer in 10 Minutes" and not getting very far).
On Thursday, May 7, 2015 at 3:32:42 PM UTC-4, Scott Miles wrote: > > Like Michael said "0.8 no longer has interpolation." > > One ramification is that any binding to *textContent* has to be exclusive > node content. IOW, "<span>[[owner]]</span>" and not " ... [[owner]] ... " > nor "<span>owner: [[owner]]</span>". > > The return of interpolation is on the roadmap for study after 1.0. > > On Thu, May 7, 2015 at 5:11 AM, Robert Stone <[email protected] > <javascript:>> wrote: > >> I can't remember where I read it, but it's something to with bound >> properties can't have any content in front of them, it's the same reason >> you need the _setColorStyle type functions. I guess the polymer parser only >> looks at the start of the content for properties. >> >> >> On Thursday, 7 May 2015 13:03:26 UTC+1, Thad Humphries wrote: >>> >>> Well I'll be... Wow! >>> >>> This is Daniel's fav-color element. Daniel likes the color red. >>> >>> >>> Thank you again. What gave you that idea? Is there something in the >>> migration doc or elsewhere that I'm missing? >>> >>> For completeness sake, here is the new fav-color.html (my intent is to >>> put all of these on GitHub when I'm finished). >>> >>> <link rel="import" href="../polymer/polymer.html"> >>> >>> <dom-module id="fav-color"> >>> <style> >>> .owner { font-weight: bold } >>> </style> >>> <template> >>> This is <span class="owner">[[owner]]</span>'s fav-color element. >>> <span>[[owner]]</span> likes the color >>> <span style$="{{_setColorStyle(color)}}">[[color]]</span>. >>> </template> >>> </dom-module> >>> >>> <script> >>> Polymer({ >>> is: 'fav-color', >>> properties: { >>> owner: { >>> type: String, >>> value: "Daniel" >>> }, >>> color: { >>> type: String, >>> value: "red" >>> } >>> }, >>> _setColorStyle: function(color) { >>> return "color: " + color; >>> } >>> }); >>> </script> >>> >>> >>> On Thursday, May 7, 2015 at 7:54:23 AM UTC-4, Robert Stone wrote: >>>> >>>> Have you tried <span>[[owner]]</span> ? >>>> >>>> On Thursday, 7 May 2015 12:51:10 UTC+1, Thad Humphries wrote: >>>>> >>>>> Oh yes! That works. Now I get >>>>> >>>>> This is Daniel's fav-color element. [[owner]] likes the color red. >>>>> >>>>> >>>>> Thanks. I had tried it outside once, but then I was still trying >>>>> double bracket and double mustache substitution. >>>>> >>>>> Any ideas on how to get the owner property to repeat like it did in >>>>> 0.5? >>>>> >>>>> On Thursday, May 7, 2015 at 7:38:58 AM UTC-4, Robert Stone wrote: >>>>>> >>>>>> OK, I can see the problem now. Your setColorStyle needs to be >>>>>> declared 'outside' of the properties block >>>>>> >>>>>> On Thursday, 7 May 2015 12:31:02 UTC+1, Thad Humphries wrote: >>>>>>> >>>>>>> No, I got that. Maybe I'm going a bridge too far for Polymer 0.8. >>>>>>> I'm trying to adapt the examples 0.5's "Polymer in 10 Minutes >>>>>>> <https://www.polymer-project.org/0.5/docs/start/creatingelements.html>" >>>>>>> to 0.8, in this case the fav-color.html example. What I've written is >>>>>>> >>>>>>> <link rel="import" href="../polymer/polymer.html"> >>>>>>> >>>>>>> <dom-module id="fav-color"> >>>>>>> <style> >>>>>>> .owner { font-weight: bold } >>>>>>> </style> >>>>>>> <template> >>>>>>> This is <span class="owner">[[owner]]</span>'s fav-color element. >>>>>>> [[owner]] likes the color <span >>>>>>> style$="{{setColorStyle(color)}}">[[color]]</span>. >>>>>>> </template> >>>>>>> </dom-module> >>>>>>> >>>>>>> <script> >>>>>>> Polymer({ >>>>>>> is: 'fav-color', >>>>>>> properties: { >>>>>>> owner: { >>>>>>> type: String, >>>>>>> value: "Daniel" >>>>>>> }, >>>>>>> color: { >>>>>>> type: String, >>>>>>> value: "red" >>>>>>> }, >>>>>>> setColorStyle: function(color) { >>>>>>> return "color: " + color; >>>>>>> } >>>>>>> } >>>>>>> }); >>>>>>> </script> >>>>>>> >>>>>>> >>>>>>> That results in: >>>>>>> >>>>>>> This is Daniel's fav-color element. [[owner]] likes the color red. >>>>>>> >>>>>>> >>>>>>> And the message "Uncaught TypeError: this.setColorStyle is not a >>>>>>> function" in the console. (Note the word red has not been colored.) >>>>>>> >>>>>>> Should I call it differently from within a <template>? But I guess >>>>>>> that by indicating your function is meant to be private that you are >>>>>>> calling it from within the <template>. >>>>>>> >>>>>>> Maybe the problem is with color being both a property and in this >>>>>>> funtion a parameter. Maybe it's related to 0.8 lacking repeat binding, >>>>>>> though I'm not trying to repeat array elements, but use owner and color >>>>>>> twice. Note that owner does not get a second replacement. >>>>>>> >>>>>>> On Thursday, May 7, 2015 at 5:33:14 AM UTC-4, Robert Stone wrote: >>>>>>>> >>>>>>>> Did you follow Michaels example correctly ? The key bit is the >>>>>>>> declararion of the functionn that computes the property value: >>>>>>>> >>>>>>>> backgroundColorStyle: function(colour) { >>>>>>>> return "background-color: " + colour; >>>>>>>> } >>>>>>>> >>>>>>>> You need to include this inside the Polymer({}) declaration block >>>>>>>> which I guess wasn't completely clear, so: >>>>>>>> >>>>>>>> Polymer({ >>>>>>>> is: "my-element", >>>>>>>> properties: { >>>>>>>> myproperty: String >>>>>>>> }, >>>>>>>> backgroundColourStyle: function(colour) { >>>>>>>> return "background-color: " + colour; >>>>>>>> } >>>>>>>> }); >>>>>>>> >>>>>>>> Your error message suggests you don't have this function. For me, >>>>>>>> that works perfectly on Chrome. >>>>>>>> >>>>>>>> For what it's worth, I named the function _backgroundColourStyle to >>>>>>>> 'hint' that it was an internal function and not part of the API - I >>>>>>>> don't >>>>>>>> like that I have to do this (expose the function publicly) but it >>>>>>>> seems to >>>>>>>> be the way polymer works. >>>>>>>> >>>>>>>> Rob >>>>>>>> >>>>>>>> On Wednesday, 6 May 2015 21:04:31 UTC+1, Thad Humphries wrote: >>>>>>>>> >>>>>>>>> When I try this, the Chrome console reports, "Uncaught TypeError: >>>>>>>>> this.backgroundColorStyle is not a function" >>>>>>>>> >>>>>>>>> On Tuesday, April 14, 2015 at 5:44:23 PM UTC-4, Michael Bleigh >>>>>>>>> wrote: >>>>>>>>>> >>>>>>>>>> 0.8 no longer has interpolation. You'll need to use annotated >>>>>>>>>> computed properties instead: >>>>>>>>>> https://www.polymer-project.org/0.8/docs/devguide/data-binding.html#annotated-computed >>>>>>>>>> >>>>>>>>>> For instance >>>>>>>>>> >>>>>>>>>> <h1 style$="{{backgroundColorStyle(colour)}}">Hello World!</h1> >>>>>>>>>> >>>>>>>>>> { >>>>>>>>>> backgroundColorStyle: function(colour) { >>>>>>>>>> return "background-color: " + colour; >>>>>>>>>> } >>>>>>>>>> } >>>>>>>>>> >>>>>>>>>> On Tuesday, April 14, 2015 at 2:09:35 PM UTC-7, Robert Stone >>>>>>>>>> wrote: >>>>>>>>>>> >>>>>>>>>>> Just migrating a very simple 0.5 example app over to 0.8. >>>>>>>>>>> >>>>>>>>>>> For 0.5 the following worked: >>>>>>>>>>> <h1 id="greeting" _style="background-color: {{colour}}">Hello >>>>>>>>>>> World !</h1> >>>>>>>>>>> >>>>>>>>>>> As I understand it, for 0.8 I need to do: >>>>>>>>>>> <h1 id="greeting" style$="background-color: {{colour}}">Hello >>>>>>>>>>> World !</h1> >>>>>>>>>>> >>>>>>>>>>> However this doesn't work as the bound property value doesn't >>>>>>>>>>> get inserted. If I remove the 'background-color:' part then I can >>>>>>>>>>> see my >>>>>>>>>>> bound property value being correctly inserted. >>>>>>>>>>> >>>>>>>>>>> I've worked my way through the migration guide and can't find >>>>>>>>>>> anything that might indicate why this isn't working so was hoping >>>>>>>>>>> someone >>>>>>>>>>> on here might be able to help. >>>>>>>>>>> >>>>>>>>>>> Cheers >>>>>>>>>>> Rob >>>>>>>>>>> >>>>>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> "Polymer" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/09b28089-80d4-4925-831d-77dbaaca9eef%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/09b28089-80d4-4925-831d-77dbaaca9eef%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/166a7397-b9d5-4e79-8ab5-80d7d1418272%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
