Comments (32)
The reason is that you can use the attribute (data-show and data-hide) without value:
<div data-hide></div>
But the normal use is with a Boolean:
scope.showVariable = true;
scope.showVariable = false;
<div data-show="{{showVariable}}"></div>
You can find an example there:
http://soundstep.github.io/soma-template/#data-show-and-data-hide
Hope that helps!
from soma-template.
Ok, so why don't just make special case when the attribute is empty and in other cases convert to boolean?
from soma-template.
I'm not sure what you mean by that. All the following examples are valid:
<div data-show></div>
<div data-show=""></div>
<div data-show="{{showVariable}}"></div>
Also some IE versions need a value to the attribute, even empty.
Do you have an actual issue with the way it is implemented? Can you provide me a plunkr or jsfiddle with what you would like to do?
from soma-template.
Only problem is a necessity of declaring one more variable which inform whether to show element or not. As I mentioned in the first post it can be done using only one variable.
from soma-template.
I see, I'll check that out to see if that implementation would cause any problems.
from soma-template.
Ok thanks. If you want I can help you with that, but I'm not so much familiar with the source code yet.
from soma-template.
Maybe it is enough to modify isAttributeDefined
function in 3.helpers.js file
function isAttributeDefined(value) {
return (value === '' || (Boolean(value) && value != 'false') || !isDefined(value));
}
from soma-template.
You can do a pull request if you want, you'll just need Grunt to compile and the tests are in /tests for both dev and minified.
As long as the tests for true, false and no value go through, it should be ok:
https://github.com/soundstep/soma-template/blob/master/tests/spec/api/special-attributes.js#L65
isAttributeDefined is used for different attributes, might need to double check all of these.
Otherwise I'll have a look when I got time.
from soma-template.
Another reason I did that if I remember well is that the attribute without value comes to be "undefined" in IE 7, or the other way around.
That would mean a difference between undefined and null, which might not be obvious to everyone.
This would show:
scope.showVariable = undefined;
And this would hide:
scope.showVariable = null;
Not that friendly.
Need to verify and think about it.
from soma-template.
Hmm, it looks complicated. The best solution will be to define the default value to the attributes. So when the attribute without value is specified its value is set to default one. But this needs more intervention to the code.
from soma-template.
And there comes another question, why is there the option to use the attribute without value? Is there someone using it? It is actually just a shorthand for style="display: none/block"
. The necessity to explicitly specify the value won't be so painful, will be?
from soma-template.
Using an attribute without value is part of the html5 spec, angular is following the same spec I noticed.
http://developers.whatwg.org/common-microsyntaxes.html#boolean-attribute
http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes
http://developers.whatwg.org/elements.html#custom-data-attribute
I don't follow exactly the spec as I should remove the attribute completely if it is false. I planned to do it with all non-used attribute like that, never had the time.
from soma-template.
But the spec speaks about boolean attributes where the state is indicateded according to their presence. They cannot have 'true' or 'false' values only the value same at their name or empty string. So for the data-show should be possible only data-show
, data-show=data-show
or data-show=""
.
from soma-template.
Yes, or data-show sharp.
Anyway being user-friendly is very important, I'll think about all this and see what I can do.
from soma-template.
I just wanted to say that data-show isn't boolean attribute according to the html5 spec, so the option to not specify the value is needless even makes thing more complicated.
from soma-template.
BTW: Angular is doing it right, according to me, ng-show accepts truthy values (everything what is true after coversion to boolean) but does not accept empty values. You can try it here http://plnkr.co/edit/Zn7QzzYsRKuaPKunUIqK?p=preview
from soma-template.
ok interesting, I got some of it wrong.
With angular, I thought having the attribute without value was actually showing, which is not the case.
An empty string is false in javascript, so the angular way makes sense (they probably just interpret the value).
So I might just implement it the same way.
from soma-template.
Working on it
from soma-template.
I like to hear that, but wait a minute. Don't you think about implementing support for javascript-like expressions in tokens (e.g. {{ var1 + fun1(fun2(var2), var3) }}
)? I think it's related to this issue. I'm already facing another issue with that. I wanted to show an element if two conditions are satisfied: data-show="first($index) && var"
. Then I realized that this is not supported. I remmebered there are helper, so I thought I got it I will make and(...)
helper. So I did that: data-show="and(first($index), var)"
. Unfortanately this nested function call isn't supported too.
I've looked into angular's documentation how are they deal with that and they has their own expression parser instead of using eval()
function. I don't know details why is it so.
from soma-template.
Angular is using the new constructor on Function to evaluate their content.
But I won't build a real parser in soma-template, this is out of scope. It would probably dramatically increase the size of the lib, which is already big...
You can evaluate thing yourself by calling a function though. Here are some examples.
Without parameter:
<div data-show="{{isValid()}}"/>
scope.var1 = 'something';
scope.var2 = {};
scope.isValid = function() {
return scope.var1 && scope.var2;
}
With parameter:
<div data-show="{{isValid(var1, var2, 'string')}}"/>
scope.var1 = 'something';
scope.var2 = {};
scope.isValid = function(v1, v2, str) {
return scope.var1 && scope.var2 && str;
}
from soma-template.
Yes I know I can compute it in the code, but my problem is that I need to evaluate two conditions which are otherwise completely unrelated. I'm rendering document splited into pages and I want to show some information on the first page only if the information is defined. Making helper isPageFirstAndInfoDefined(pageIndex, info)
is conceptually bad.
The solution I wanted from you is to make a full expression parser or at least support function (helper) call as a parameter of another function's call, e.g. helper1(helper2(var1), var)
.
from soma-template.
If both your functions are on the scope, you can send only the parameters and call helper2 inside your helper1.
Note that you can also add functions helpers on the parent scope, the parsing of the expression is recursive through the scopes.
A bit more details, check the tests to see what's currently possible with the expressions:
https://github.com/soundstep/soma-template/blob/master/tests/spec/api/expression.js
https://github.com/soundstep/soma-template/blob/master/tests/spec/internal/expression.js
I won't build a parser because it is simply a lot slower, I started the lib like angular using "new Function", to quickly find out how slow it is (benchmarking it against handlebars and other template libraries). Instead I parse the expression without evaluating, much quicker but that means you can't write javascript in the html as you do with angular.
from soma-template.
Ok, it is not ideal but I solve this using function defined on scope
scope.showInfo(pageIndex) {
return pageIndex == 0 && scope.info != null;
}
But if you implement support for that pattern with function calls as parameters as I mentioned, you don't need to use eval()
function or some own implementation. It will be enough to allow params to be interpolations too and when you will be evaluating root interpolation you will evaluate recursively the params first.
from soma-template.
I already parse parameters but not functions somehow, can't remember why.
I'll have a look into that.
Do you mind creating a new issue to parse functions in parameters?
Cheers.
On 18 Jun 2013 19:34, "Richard Jedlička" [email protected] wrote:
Ok, it is not ideal but I solve this using function defined on scope
scope.showInfo(pageIndex) {
return pageIndex == 0 && scope.info != null;}But if you implement support for that pattern with function calls as
parameters as I mentioned, you don't need to use eval() function or some
own implementation. It will be enough to allow params to be interpolations
too and when you will be evaluating root interpolation you will
evaluate recursively the params first.—
Reply to this email directly or view it on GitHubhttps://github.com//issues/3#issuecomment-19631204
.
from soma-template.
Ok, I'll create the new issue.
EDIT: #5
from soma-template.
Great, you fix it :-) I'm not so sure what was your intentions but I made a test how your implementation works and how I suppose it to be working (not sure in every example): http://plnkr.co/edit/dhgZAZ2t8tupYkoOdOC0?p=preview
... just for your information
from soma-template.
Great thanks but don't forget there's no parser in the lib, this 2 examples are different, the first one is a string and the second is an object:
<span data-hide="{prop: 1}">
<span data-hide="{{thing}}">
scope.thing = {prop: 1};
from soma-template.
if you want more details, I basically check for:
true, "true", 1, "1" ---> returns true
false, "false", 0, "0" ---> returns false
if none of them, I let javascript decide:
!!value
This is needed because everything coming from tokens are string, in javascript !!"false"
returns true, as false is a string and not a boolean.
Only the scope examples are valid. And:
!!{} --> is true
!![] --> is also true
It is very easy to test, you start node or open a console and add a double exclamation mark before anything you want to test.
from soma-template.
Ok, that makes sense. Only the [] as a scope variable, will you fix that to be considered as true or will leave that as it is? As I checked angular, they consider it as false, but empty object as true: http://plnkr.co/edit/Zn7QzzYsRKuaPKunUIqK?p=preview
from soma-template.
You have inconsistency in tests, you say in comment "value is true" but expect to be false:
it("data-hide with value", function () {
// value is true
ct.innerHTML = '<div data-hide="{{myValue}}"></span>';
tpl.compile();
tpl.scope.myValue = [];
tpl.render();
if (ie === 7) expect(ct.firstChild.getAttribute('data-hide')).toBeFalsy();
else expect(ct.firstChild.getAttribute('data-hide')).toEqual('false');
expect(ct.firstChild.style.display).toEqual('');
});
from soma-template.
And check changelog, you have typo in your example.
from soma-template.
There's actually a problem with the empty array. Tokens are evaluated because you can have data-show="{{part1}}{{part2}}"
!!("" + {}) ---> returns true
!!("" + []) ---> returns false
!!("" + ["string"]) ---> returns true
I love javascript.
I'm not sure I'll change that one, javascript is javascript... I'll correct the test though.
(Thanks for the typo).
from soma-template.
Related Issues (20)
- Parse functions in parameters HOT 1
- data-repeat undefined parameter HOT 1
- Setting value should use the content attribute HOT 3
- angular like "filters" in data-repeat HOT 2
- Update Typescript definition HOT 1
- demos/people doesn't work under Firefox HOT 1
- Can't pass arguments to helper function nor perform arithmetic operations. HOT 2
- missing license and copyright HOT 2
- data-click type events not working on iOS
- 2 questions HOT 2
- conditional if/else ? HOT 6
- Possible confusion involving template re-compilation HOT 2
- Run-time compiled templates not initialising nested templates HOT 1
- Template constructor, named variables not honored HOT 1
- soma-template swallowing errors in services, templates HOT 2
- data-repeat incorrectly rendering when initially blank, then subsequently rendered with items HOT 1
- Late instantiation of templates doesn't work as expected
- data-skip attributes from scoped variables (Tokens) HOT 2
- Make the docs more clear about the use of npm install HOT 2
- data-enabled attribute
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.
from soma-template.