polymer-expressions's Introduction
polymer-expressions's People
Forkers
dfreedm cletusw arv hughsk nevir laudarch benogle timoxley garlicnation ckupdate mysticatea justinfagnani intranetfactory greyfoxrgr rlugojr fame513 jogibear9988 isabella232polymer-expressions's Issues
Arguments in CallExpression are not watched - binding fails
According to official docs "The function’s arguments are observed for changes, and the expression is re-evaluated whenever one of the arguments changes" (https://www.polymer-project.org/docs/polymer/expressions.html).
However when running following example we can see that Names list is not updated after a change in the names
object.
<func-binding></func-binding>
<polymer-element name="func-binding">
<template>
Names (not updated):
<ul>
<template repeat="{{key in keys(names)}}">
<li>{{key}}: {{names[key]}}</li>
</template>
</ul>
Ages (updated):
<ul>
<template repeat="{{age in ages}}">
<li>{{age}}</li>
</template>
</ul>
</template>
<script>
Polymer({
names: {
a: "John",
b: "James"
},
ages: [20, 30],
ready: function() {
var self = this;
setTimeout(function() {
self.names.c = "Bob";
self.ages.push(40);
}, 1000);
},
keys: function(obj) {
return obj == undefined ? [] : Object.keys(obj);
},
});
</script>
</polymer-element>
Expressions with tokenList, styleObject filters don't update dynamically
With an expression like:
{{ classes | tokenList }}
The expression doesn't update when one of the values inside classes is updated. For example you might expect to be able to toggle the 'selected' class like this:
this.classes.selected = !this.classes.selected
However, since the properties of classes
aren't observed, the change isn't detected.
Test case:
http://jsbin.com/qamat/12/edit
The Broken Switch button (which updates the property) doesn't trigger a change to the binding.
The Working Switch button (which clones the object) does trigger a change.
May be related to the issues mentioned in PR #23, of knowing which values to observe.
should an expression fail to render if filter does not exist
I feel like the expression should be ignored (and still render value) if filter doesn't exist in the scope. so {{myValue | toUpper}} should still render to DOM even if the toUpper filter does not exist.
add on-* event bindings support
This is moved from: googlearchive/NodeBind#10
Filters bind incorrectly in template with anonymous repeat
If I try and bind something like this:
<template repeat="{{myItems}}">
{{ property | myCustomFilter }}
</template>
The filter doesn't run correctly.
However, if I change the HTML to be:
<template repeate="{{item in myItems}}">
{{ item.property | myCustomFilter }}
</template>
The filter runs correctly. I think it should run in both cases.
What should named scopes do when the scope *name* is bound to an input value
Moved from: googlearchive/TemplateBinding#109
i.e.
<template repeat="{{ user in users }}">
<input value="{{ user }}">
</template>
Seems like the two choices are
-
Up the element position in the iterated Array. This seems scary, as it will destroy the instance and create a new one
-
Issue a warning.
support binding to HTMLInputElement.valueAsNumber property
Tests failing on Windows
The computed property with object index
and computed property with object index - assignment
tests are currently failing on all platforms on windows.
remove support for labelled statements
this will be breaking change when we do it.
Expression Comprehension
I have a set of points stored in an array which are mapped to an SVG path:
<template>
<svg>
<path d="M {{array | comprehension}}"/>
</svg>
</template>
array: [{x:1, y:1}, {x:100, y:100}, {x:100, y:1}, {x:1, y:1}]
comprehension: function(a) {
return a.map(function(e) {
return e.x + ' ' + e.y;
}).join(' L ')
}
However the points aren't updated because only the array is observed. It would be great if the following was possible:
<template>
<svg>
<path d="M {{array[0].x array[0].y}} L {{a.x + ' ' + a.y for a in array.splice(1)}}"/>
</svg>
</template>
That's probably out of scope for the expressions project? I guess when an array object is unbound you'd have to make sure to unbind from the bound internal objects before it was removed.
If an alternate HTML spec SVG path had nested point
elements:
<template>
<svg>
<path d="M {{a.x + ' ' + a.y for a in array}}"/>
<template repeat="{{array}}">
<point x="{{x}}" y="{{y}}"/>
</template>
</path>
</svg>
</template>
Do you have any suggestions on how to solve this issue? Binding to the SVG elements via Polymer is very difficult at the moment. I'm not sure how to set up the bindings I need manually.
Would like a way to register filters on arbitrary templates
I'm using sorted-table in one of my components:
https://github.com/stevenrskelton/sortable-table#polymer-filters
I provide a row template, and would like to use custom filters in that provided template. However to do that, I have to register them on PolymerExpressions:
function myFilter(row){
return [your logic here];
}
...
PolymerExpressions.prototype.myFilter = myFilter
This breaks encapsulation of my polymer component. :(
Make bindings available in conditional expressions
For the sake of brevity, it would be nice if the bindings done in the bind
attribute would be instantly available in any if
expressions. Like so:
<template bind="{{ user.address.street as street }}" if="{{ street }}>
{{ street }}
</template>
Similarly
<template bind="{{ user.address }}" if="{{ street }}>
{{ street }}
</template>
Perhaps the same thing would be useful for repeat
expressions.
Allow declaring expressions as 'safe'
I understand why Polymer is escaping source code in expressions by default, but it should also be possible to declare an expression as 'safe' and allow it to return source code, as in other frameworks.
I like the handlebars triple mustache syntax.
<div>{{{ safeExpression }}}</div>
function call syntax
not endorsing this, but I think it's the request at Polymer/polymer#693
the idea would be to support function call syntax like {{ foo(bar, baz) }}
. I recall this being discussed but I don't think it's implemented.
dereferencing expressions do not bind correctly when the key contains dash "-"
This title may not be correct, it's a bit strange.
http://jsbin.com/fejepapi/2/edit
{{comments[key]}}
Does not update property when comments[key]
is replaced and key
contains a dash.
From the bin:
key: 'first' // works
key: 'f-irst' // doesn't work
Should support "last" filter for array access
You can write {{ object.foo[object.foo.length - 1] }} but it's really gross, you should be able to just write {{ object.foo | last }}.
Null paths throw exceptions with "as" syntax
If a template is bound to a path that would evaluate an undefined model member, then an exception is thrown at https://github.com/Polymer/polymer-expressions/blob/master/src/polymer-expressions.js#L149
Example:
<template id="t" bind="{{ foo.bar as b }}">
<span>{{ b }}</span>
</template>
<script>
t.bindingDelegate = new PolymerExpressions();
t.model = {};
</script>
improve syntax for filters with multiple parameters
Currently we can do:
{data | filter}}
...
filter: function(data) {
But if there are two values, we have to do:
{{data: data, more: more} | filter}}
...
filter: function(args) {
Which is wordy and uses a different call style.This has led to people using corruptions like this:
{{null | filter(data, more)}}
...
filter: function(_, data, more) {
Ideally we can figure out something that allows us to specify multiple dependencies without the crufty syntax.
path expressions with literal computed properties will fail to fetch
e.g. foo[0] as bar
The "as bar" is required so that the path is processed as an 'as' expression within PolymerExpressions, rather than being handed directly out to observe-js as a path.
{{ myArrray[ myKey ] }} isn't a valid expression
I tried to use an expression of the form {{ myArrray[ myKey ] }}
where my array and my key both are defined values of my custom-element instance but I get the following error: Exception caught during observer callback
.
Looking at the documentation for expression, it seems that what I'm trying to achieve isn't possible yet.
Could you help me make it work?
Scope-level filters should take precedence over 'global' filters
Currently, filters defined on PolymerExpressions.prototype take precedence over filters defined on the current model/scope. I think it should be the other way around as the current scope obviously has a higher specificity than the 'global' filter scope.
allow filters in "in" and "as" expressions
e.g. for use in <template bind/repeat>
Implement sort and filter array filters
Moved from: googlearchive/TemplateBinding#103
Should be able to <template repeat> on object values, Maps just like we do on array values.
Moved from googlearchive/TemplateBinding#116
It would also be nice for both arrays and objects to be able to have an index value available for binding. For instance:
<template repeat="{{ myarray }}" index="i"> {{ i }} {{ somevalue }}</template>
Demonstration of object repeat template not working:
<!DOCTYPE html>
<html>
<head>
<script src="polymer.min.js" debug></script>
<element name="v-bug">
<template>
Array Template:
<template repeat="{{arraydata}}">
{{}}
</template><br>
Object Template:
<template repeat="{{objectdata}}">
{{}}
</template>
</template>
<script>
Polymer.register(this, {
objectdata: { alpha: 1, beta: 2, charlie: 3 },
arraydata: [1,2,3]
});
</script>
</element>
</head>
<body>
<v-bug></v-bug><br>
</body>
</html>
Document implications of expression scopes on filters
If I understand things correctly, PolymerExpressions always looks for defined filters in the current scope. This means that in this example
<template bind="{{ user.address }}">
{{ street | shorten }}
</template>
PolymerExpressions will look for the shorten
filter on user.address
object instead of the elements prototype. I'm assuming this is the intended behavior but I suspect it will trip up quite a lot of people so it should probably be documented somewhere.
Error with `<tr template repeat="{{tr in rows}}">`
https://github.com/Polymer/polymer-expressions/blob/master/src/polymer-expressions.js#L17
I think to throw an error here if node.tagName !== 'TEMPLATE'
support binding to HTMLInputElement.valueAsDate property
The solution is to implement a built-in date filter which servers the same purpose.
Moved from: googlearchive/TemplateBinding#85
Unintended Semicolon in if statement
Introduced:
e8ca9c0#diff-368560b32795b265ae8f22c45179d21dR118
In IdentPath
setValue: function(model, newValue) {
if (this.path.length == 1); // <-- Semicolon should be removed.
model = findScope(model, this.path[0]);
return this.path.setValueFrom(model, newValue);
}
scope names in expressions can collide with other references
Please update the issue title as needed, I'm not being super precise.
An expression like this
<polymer-element name="test-element" attributes="property">
<template>
<template repeat="{{id in ['a', 'b', 'c']}}">
Throws or has unusual behavior when the alias variable (id
in this case) corresponds to an HTMLElement built-in.
Repro: http://jsbin.com/wediq/2/edit
Fwiw, I've also seen alias variables affect an element's properties, but I didn't capture the details, I'm working on a repro.
Computed properties still can't fully express all dependencies. Consider some mechanism of imperatively directing them to update
One can use filter syntax to conveniently construct computed properties. For example, I made a json-dump element that uses this construction:
{{object | stringify}}
Where stringify
is a method on my element which stringifies an input object.
However, the stringified representation of object
depends on more than object
(iow, my filter has non-explicit dependencies on object
's properties).
It's normal behavior for the binding not to update when object
's properties changes, so it would be useful if there was a way to touch, tickle, or kick the binding explicitly when needed.
Support binding to events with mixed case
A number of dom events have mixed case. Attributes are all lowercase so we can't match the event name directly using the attribute.
Here's a partial list with mappings:
{
webkitanimationstart: 'webkitAnimationStart',
webkitanimationend: 'webkitAnimationEnd',
webkittransitionend: 'webkitTransitionEnd',
domfocusout: 'DOMFocusOut',
domfocusin: 'DOMFocusIn',
dommousescroll: 'DOMMouseScroll'
}
polymer-expressions broken for semantic templates?
I saw this code in prepareBinding:
if (expression.scopeIdent &&
(node.nodeType !== Node.ELEMENT_NODE ||
node.tagName !== 'TEMPLATE' ||
(name !== 'bind' && name !== 'repeat'))) {
throw Error('as and in can only be used within <template bind/repeat>');
}
... but I can have templates like <td template repeat>
right? And those wouldn't necessarily have tagName == 'TEMPLATE'.
Bindings of the form `{{items[index]}}` do not update when `index` differs from it's initial value, and `items[index]` changes
We tried to reduce this problem to this smallish form:
But as noted in the title, the problem behavior requires specific steps. Click on the JSBin to see the steps.
Need a design for registration of custom filters as well as a first batch of default (built-in) filters
class="foo {{ {bar: true} | tokenList }}" excludes foo
http://jsbin.com/acolUxu/1/edit
This works here, but on head seems to be broken.
implement non-dynamic deps expressions which can enumerate complete paths
Expressions like 1 > foo.bar
will currently generate two addPath()
calls. If model.foo
is initially null, when model.foo.bar
becomes reachable, it must be observed.
Rather than having all expressions reset their dependencies on any change, implement a way for non-dynamic deps expressions to enumerate full paths (in the above example foo.bar
)
Literal "true" doesn't test as truthy
When I write an expression like it doesn't appear to test as truthy. {{ 1 }} and {{ !! true }} work as expected. Even if="{{ }}" appears to evaluate as truthy, but not true.
template binding + using getters in firefox = 100% CPU & all RAM
Try doing template binding in firefox where the target is a getter rather than a property.
You'll notice Firefox wants 100% CPU, reducing display perf to about 0.1 frames a second, without any interaction. Similar issue chrome canary (without any experimental flags on), but is slightly more usable.
If left for a few minutes will consume many gigabytes of RAM.
The problem may be more in the object observe code or wherever the dirty checking lives.
I'm thinking the dirty checking needs to be a bit smarter. Changes applying late is better than eating all the resources.
Let me know if you want more information or a minimal reproducible case, you probably already know about this, probably an issue somewhere on one of these repos.
member expressions with identifiers are broken
e.g. foo[bar].bat will not work properly.
the issue is that the deps mechanism will observe
foo
bar
bat
Which is wrong. It needs to observe
bar
foo[bar].bat
dynamically
test failure after issue29 - 3 test on IE11
Running IE11 on the "issue 29 - 3" test it passes, but there's a failure on cleanup afterwards.
Not entirely sure if it's that test, the results seem timing dependent. Some of the early investigation notes are here: #43 (comment)
(edit: it's 29-3 not 29-2. can be seen by running http://localhost:8000/polymer-expressions/tests/index.html?grep=issue-29 - 3)
Some variables in ternary operator are not updating display.
Repro code: https://dl.dropboxusercontent.com/u/5739705/polymer/ternary/test.html
I think that the hidden term at first time has been not observed its value.
The hidden term: It's the third term if the first term is truthy. Otherwise, it's the second term.
Expression based on array does not update when array is modified
See http://jsbin.com/wemunuzulonu/2/edit for several examples, type something in the input box and watch the behaviour.
Cache expressions
Expression parsing is currently showing up in profiling.
Strange syntax error with square brackets in template
The following polymer-element can be happily embedded in a page, but fails with a SyntaxError: Unexpected token ] when it's created through script.
<polymer-element name="borked" attributes="failures tree ">
<template>
<template if="{{ failures[tree] }}">
</template>
</template>
<script>
Polymer({
failures: {},
tree: '',
});
</script>
</polymer-element>
Provide some standalone examples
I tried to write a test case for googlearchive/TemplateBinding#188, but got stuck because there weren't any simple examples of the filtering library. TemplateBinding provides some at https://github.com/Polymer/TemplateBinding/tree/master/examples/how_to, but those don't include named scopes or filters because those features are provided by this library instead.
Question: Advice for how to implement global filters in 1.0
In .5, we could write global filters:
PolymerExpressions.prototype.uppercase = function(input) {
if (input) {
return input.toUpperCase();
}
};
And bind data piped through the filter {{data | uppercase}}
In 1.0, we'd do something like this: {{uppercase(data)}}
.
I'm wondering if there's a recommended approach to making the function (ie: uppercase) available to all custom-elements in my project?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.