I'd like to activate a <paper-button> using an expression bound to its active property, but this code doesn't work:
<paper-button id="btnPointDown" on-click="{{decrement}}" active="{{points == 0}}">\/</button>
How can I fix this?
In Polymer, you can't put an expression directly in the bindings. You have to use a function, which will return your condition result, and use it in the binding instead.
With your example, it would look something like this:
<paper-button id="btnPointDown" on-click="decrement" active="[[_checkIfPointsIsZero(points)]]">\/</paper-button>
The function _checkIfPointsIsZero will be evaluated each time points changes, assuming points is in the component's properties.
I also recommend using a simple data binding in that case.
Related
According to observer, it observes all changes to Polymer properties.
But, two-way binding (using {{}}) already does that, right? Why do we need observer to process the changes?
They are similar in that a value-change invokes the effects of both an observer and data binding, but they have different purposes.
Two-way data binding
A two-way data binding is an annotation
Sets a property of element A to the value of another property in element B
Any changes to B's property automatically update A's property, and vice versa
Observer
An observer is a function that is called whenever a value-change occurs to one or more properties
Example: To set an element's operational mode based on the value of its enabled property
An observer's purpose is not necessarily to set another property (unlike data bindings). It could call another function based on the new property value.
Example: To generate an AJAX request when a url property changes
The observed properties must be in a single element (e.g., a parent element cannot observe a child's property without binding it to its own copy of the property)
I think you got both of them mixed up.
<dom-module id="my-element">
<template>
<paper-input value="{{myValue}}">
</template>
<script>
Polymer({
is:"my-element",
properties:{
myValue:{
type:String
}
}
</script>
</dom-module>
value="{{myValue}}" can be read as whenever there is any change value, myValue will also get updated.
Now, consider a scenario where you want to be informed whenever myValue changes. Above written code is not enough for that (yes, i know you can listen on value-changed event to know about the change, we'll come back to that later). In order to do that you'll need to add observer on myValue only then you'll know when myValue has changed.
Above mentioned case had another solution ie listen to value-changed event fired by paper-input, but what about cases where your property is not binded to any element(its getting its value from db let's say) and you want to know when its value changes.
So to summarise it two-way binding is used when you want to know that value of some property which is not part of your own shadow-dom has changed and observer is used when you want to know about the changes in properties inside your own dom
I got an error when i put a nested ng-show attributes for custom directive,
one attribute in the markup of the directive and the second inside the root element of the directive template.
My real scenario are complex so i will simplify it to this example:
Suppose i have my-custom-directive below which already contains ng-show:
<my-custom-directive ng-show="someValue >= 5"></my-custom-directive>
And then the template of 'my-custom-directive' look like this:
<div ng-show="options != null">My Custom Directive</div>
Those multiple ng-show together cause an error.
if i remove one of them or move the inner ng-show at least one level deeper in it's dom tree the error gone (it's happen when it's location is on the root template element).
this error tested on angular v1.4.8.
Is this angular bug? or there is a reasonable explanation for this behavior?
here is the Plunker example:
http://embed.plnkr.co/ZTZVcfc5bfmjPo9t0Isw
Thank you in advance,
Menachem
Because the directive has replace: trueit is trying to merge the two ng-show values together resulting in an error. The simplest solution I believe is to just do replace: false
Or you can inject the value via isolate scope and use a single ng-show value within the directive. I believe this is considered the cleaner solution.
Example: http://plnkr.co/edit/5oc8c1Hrz8N1F2klCio7?p=info
scope: {
someValue: '=someValue'
}
I was digging a bit into the Polymer 1.0 elements and I am a little curious about the computed properties.
For example, in paper-drawer-panel.html,
<dom-module id="paper-drawer-panel" …>
…
<div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]">
…
</div>
…
</dom-module>
<script>
Polymer({
is: 'paper-drawer-panel',
…
_computeDrawerStyle: function(drawerWidth) {
return 'width:' + drawerWidth + ';';
},
…
</script>
drawerWidth is a property of paper-drawer-panel, so why is it so important to explicitly include it in the parameters of the computed property?
Is
[[_computeDrawerStyle()]]
…
_computeDrawerStyle: function () {
return 'width:' + this.drawerWidth + ';';
}
Is this bad practice?
Explicit arguments in computed bindings serve an important purpose: telling Polymer which properties the computed binding depends on. This allows Polymer to know when to recalculate and update the computed binding.
Take [[_computeDrawerStyle()]], for example. In this case, Polymer has no idea what other properties the computed binding depends on, and will only calculate it once on load.
As soon as you add drawerWidth explicitly ([[_computeDrawerStyle(drawerWidth)]]) Polymer now knows that it should run the computed binding again for a new value every time drawerWidth changes.
I think you are confused. What you are referring to in your code example here style$="[[_computeDrawerStyle(drawerWidth)]]" is a call to a private function called _computeDrawerStyle and of course you need to explicitly give it the right parameters. Check the documentation here to learn about computed properties.
Polymer has two separate concepts and you are confusing them.
Computed properties. These are properties that depend on other ones and are recalculated whenever their components changed. You can then databind the value of that computed property as a property value. <paper-draw-panel> does NOT have a computed property (I checked the code).
Function calls referenced in the databinding (which is what _computeDrawStyle) is. This causes Polymer to call that function (of the element) when ever any of its parameters changed. The parameters are all properties (or you can use subproperties of objects and indexes of arrays) This is what is happening here.
I tried to find on Primefaces Documentation but I have not found how can I customize the filter function for SelectOneMenu.
I add filterMatchMode="custom" filterFunction="#{mainRandevuBean.ilFilter()}"
But I don't know how can I write bean filterFunction.
The filter is a javascript (client-side) function. It all IS in the PrimeFaces documentation, which you should always look into first, carefully, thouroughly.
So use filterFunction="myFilter"
and create a javascript function like
function myFilter(itemLabel, filterValue) {
// return true if this label matches, false otherwise
}
Just as a sidenote: primefaces documentation doesn't say anything semantically about the parameters. It also does not mention where the label comes from (in fact, the docs mention "the item value" which is not very clear).
In fact I used the JavaScript function to debug this in order to figure out what was provided by default as a label.
function filterList(label, filter){
alert("label="+label+" and filter="+filter);
return false;
}
At first I thought it would be anything like the text inside the HTML generated for each list item. But when debugging it I saw the alert said that the label was something like my.package.SomeValueObject#123456 (which is obvously the Java object toString on each item in the list).
You need to define the itemLabel property on the selectItems which is inside the selectManyMenu to generate a proper text value used by the standard filtering mechanisme. As far as I could figure out that is the only reason why you have to put itemLabel there. In the documentation itemLabel is specified before explaining filtering which is confusing.
And as far as I know the itemValue defaults anyhow to just the object value, so I believe following from the documentation is redundant.
itemValue="#{player}"
Hope it helps anyone :.)
I resolve this problem with autocomplete component. Primefaces autocomplete component with dropdown="true" property works like one menu.
I started working with knockout a few months ago and so far it is being a very good road. Today when I was working with some inputs in my html I came across a very boring issue that took me a while to figure out. Here is my code:
<div class="add-box" style="display:none;" id="new-user">
<textarea placeholder="Name" data-bind="value : name"></textarea>
</div>
<script>
function UserViewModel() {
var self = this;
self.name= ko.observable('');
}
$(document).ready(function () {
ko.applyBindings(new UserViewModel(), document.getElementById('new-user'));
})
</script>
This code works fine, but the first time that I did was like this:
<textarea placeholder="Name" data-bind="value : name()"></textarea>
The only difference between them are the parenthesis () at the end of the name property. Since this is a observable one I thought that the parenthesis would be necessary in order to make the 2-way-binding. But with them, whenever I change the value of the textarea the viewmodel is not update accordingly, if I remove everything works.
Could you explain why on this case I have to remove the parenthesis, and why in other scenarios, like when I used data-bind="text: I have to put them??
Here is the magic with KO: special "Observable" function-objects.
When you use parenthesis, you evaluate the observable (which is just a special function) which results in a value that breaks "live" data-binding: in this case the underlying value (say, a string) is bound, but not the observable from which the value was obtained.
The underylying bindings are (usually) smart enough to deal with both observables and non-observable values. However, bindings can only update observables and can only detect Model changes through observables.
So, usually, do not include parenthesis when using obervables with declarative data-binding.
Passing the observable will make sure the Magic Just Works and allow the View and Model to stay in sync. Changes to said bound observable will trigger the appropriate binding update (e.g. so that it can update the HTML) even if the binding does not itself need to update the observable/Model.
However, in some rarer cases, you just want the value right then and you never want the binding to update from/to the Model. In these rarer cases, using parenthesis - to force value extraction and not bind the observable itself - is correct.
In my case I was using jquery.tmpl ,
and knockout 2.2.0 works with jquery.tmpl, when I upgrade to knockout 3.0, I got this problem
when I use this one, It somehow get conflict with Knockoutjs builtin template/
Removing jquery.tmpl.js resolves my problem.