How would you change an html attribute based on the model?
I'm trying to change an input's placeholder text based on a length of an array:
<input placeholder="{{todos.length ? 'Insert todo' : 'Insert your first todo'}}" />
But that doesn't seem to work...
JS Bin code example.
The ternary operator doesn't seem to work in this case, instead of doing this
{{cond ? true : false}}
Change it to
{{ exp && true || false }}
So your placeholder attribute would look like this (I have shortened it for demonstration purposes)
placeholder="{{todos.length > 0 && 'Insert' || 'Insert first'}}"
For anyone else who comes across this (like I just did via Google), it looks like Angular recently added support for the ternary operator in expressions. I just used it successfully in 1.2.16 to dynamically update a tooltip (title) attribute. It seems to have first appeared in the documentation for 1.2.17, although they still generally discourage its use:
From: AngularJS: Developer Guide: Expressions
Apart from the ternary operator (a ? b : c), you cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers, not the views. If you need a real conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.
Related
I currently have .pug code that looks like this:
a.item
.ui.green.horizontal.label something
.ui.basic.grey.label
| {{ variable1 }} descrip1
.ui.basic.green.label
| {{ variable2 }} descrip2
.ui.basic.grey.label
| {{ variable3 }} descrip3
I would like to make the colors of the individual ui elements dynamic based on the values in the variables. So for example, if variable1 > 30, the ui element would be
ui.basic.green.label
whereas if variable1 < 10, the ui element would be
ui.basic.red.label
Is there a way to do this in .pug? I just get multiple divs when I try and make each component dynamic. As a note, I tried
ui.basic.{{color_variable}}.label
or something to that effect, but obviously this is incorrect syntax and it didn't compile properly.
I'm very new to HTML and .pug and any help is appreciated!
EDIT: The solution that worked for me (with Sean's help) was escaping the character using the # key.
.ui(class= "basic #{color_variable} label")
or
.ui.basic.label(class= "#{color_variable}")
EDIT2: Apparently the above is deprecated, please look at Sean's answer below.
It's possible when using the standard attribute syntax for classes instead of the class literal syntax (or when combining the two).
Here's an example of how to do that with your markup.
This Pug—
.ui.basic.label(class= color)
—will compile to this HTML—
<div class="ui basic label green"></div>
—if the value of the color Pug variable is "green".
<div data-collapse class="left-justify" id="requirements">
#Html.Raw(string.Format(#_stringLocalizer["RegisterNoticeMessage"], #Html.ActionLink(#_stringLocalizer["RegisterLinkDisplayName"], "Register")))
</div>
In this piece of code, #Html.ActionLink() is returning Microsoft.AspNetCore.Mvc.Rendering.TagBuilder instead of returning anchor element containing URL path to the specified action.
What is the right way to use #Html.ActionLink() in string.Format(). Or, do I missing anything, here?
The helper method Html.ActionLink always returns a TagBuilder object. When you pass such an object into a string parameter, the ToString() method will be called, resulting in your observed output (the class name: "Microsoft.AspNetCore.Mvc.Rendering.TagBuilder").
It seems to me you are trying to create a hyperlink in a rather weird way. Have you tried using the Url.Action helper method? This method returns a plain old string, ready to plug into any href attribute.
E.g. this code would be equivalent of what you're trying to achieve:
#Html.Raw(
string.Format(_stringLocalizer["RegisterNoticeMessage"],
"" + _stringLocalizer["RegisterLinkDisplayName"] + "")
)
Sidenotes:
It is possible get the string value of a TagBuilder, as illustrated in this post.
No need to repeat # when you're already working in Razor/C# context.
Be extremely careful when using Html.Raw as it might result in XSS vulnerabilities.
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.
Is there a way (without JS) to make input fields POST a default value in case some input fields were blank when the submit was executed?
In other words: I want to avoid on server side reciving stuff like
"ID=&PW="
<form>
<input name="ID" value="stuff"/>
<input name="PW" value="stuff"/>
</form>
setting the value doesn't really help as the user still can clean the input field by him self.
There is no way to do so in pure HTML. Even if you use JS to setup defaults, someone can intercept and modify HTTP Request.
Never trust input values. You can't assume their values.
No. Not without JavaScript.
...but it would be so easy with JavaScript. Not that I advocate inline scripts, but how about:
<input name="ID" value="stuff" onBlur="this.value=this.value==''
? 'default'
: this.value;" />
The Javascript you see is a simple ternary operator, following the pattern:
myVar = condition ? valueIfTrue : valueIfFalse;
So it's checking if the input is blank. If so, set it to a default; if not, let it be.
You should simply enforce the default value server-side. Otherwise the user will always have the ability to trip you up. You can use javascript to reduce the chance of this happening but javascript will always be exposed to the user. Html doesn't have a method for this and even if I'm wrong and it does, or does in the future - such a thing is ALSO exposed to the user.
You're talking about using strtok. I'd recommend simply breaking the tokenizing out twice. Once for the &, and then within each of those results again for the = (obviously if the second result of each pair is blank or null, substituting the default). Otherwise, tokenize it yourself, still on the server.
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.