I have a jquery template in which I have knockout js binding to a function literal, the function literal has curly braces inside and they are been wrongly interpreted by the template engine, here is the template:
<button {{html "data-bind='click: function(){ loadProduct(" + i + ") }'" }}>${ product.Name }</button>
Is there any way to scape those braces? I've tried the {#literal} tag without success, also I wrapped everying in the {{ html }} tag because the hyphen in "data-bind" is also wrongly interpreted by the engine.
If you want to add data-bind attributes in your jQuery template, then it is not necessary to do so much escaping.
I am assuming that "i" in your case is from looping through your products using something like {{each(i, product) Products}}. In your template, you can define this element like:
<button data-bind="click: function(){ loadProduct(i); }">${product.Name}</button>
It will have access to the variable "i" in the function without concatenating strings.
Sample here: http://jsfiddle.net/rniemeyer/Pq5Vd/
Thanks.
Are you sure that's the problem? jQuery templates should only recognize double curly brackets. Single curly should work fine like here > http://jsfiddle.net/neebz/9fsv2/
Related
In Fabricator Assemble, I could have a component button.html:
<a class="button">{{text}}</a>
I can use this with the syntax {{>button text='Home'}}. Notably, I have to specify a name for the "text" attribute.
I'm looking to see how I can handle not needing to do that in Assemble. The Literals section of the docs for Handlebars (whiich Fabricator Assemble is built on) highlights an alternative syntax with which I could include a button:
{{>button 'Home'}}
In this example, "Home" is a value without any name for it at all. Handlebars also indicates the following is possible as a basic block:
{{#button}}
<b>Some button content</b>
{{/button}}
Likewise, that content has no name.
I'd like to be able to do this same thing in Fabricator Assemble, but it doesn't seem to have a way for me to include this nameless content. In templates there's {% body %} but that doesn't work here.
In Handlebars, which Fabricator Assemble is based on, all examples for how to recreate this involve JavaScript, which doesn't translate well to Assemble.
What can I do to use {{>button 'Some text'}} or {{#button}}...{{/button}} syntax in Fabricator Assemble? Is this behaviour even available?
In the current version, the easiest way to achieve this is with a custom helper.
Add the following to the helpers option in your gulpfile.js:
default: (value, defaultValue) => {
return value || defaultValue;
},
Then inside a handlebars template:
<div>
{{default varName 'default value'}}
</div>
I'm trying to set a class or id parameter on a <h:inputHidden> in JSF. The code looks like this:
<h:inputHidden value="#{getData.name}" class="targ" />
But in the browser, the class isn't set:
<input type="hidden" name="j_idt6" value="j_idt6">
I need to set a class to this parameter, because I have a JavaScript autocomplete function for a <h:inputText> that sets a value in the hidden input, which needs to be passed in the next page.
Any ideas? Thanks!
I know it's a little bit late, but it can help someone in the future.
As inputHidden shows nothing in the browser there's no sense to allow it to have a class.
You can use the Id but as the Id could change as you change the component parents using it would bring some headache.
I'd suggest as a workaround, you can give it a parent so you can manipulate it by javascript.
Exemple:
JSF
<h:panelGroup styleClass="someCssClass">
<h:inputHidden id="someId" value="someValue" />
</h:panelGroup>
Javascript (using jQuery, you could use pure javascript also)
$('.someCssClass input[type=hidden]').val('yourNewValue');
None of these answers here satisfied my needs (need the PrimeFaces component, need class not ID, wrapping is too much work), so here's what I came up with:
Use pass-through attributes: https://www.primefaces.org/jsf-2-2-pass-through-attributes
Use pass:hidden-class="blah" (in my case, it's xmlns:pass up top)
Use [attribute=value] selector:
https://www.w3schools.com/cssref/sel_attribute_value.asp
document.querySelector multiple data-attributes in one element
That basically boils down to using something like this (because h:inputHidden becomes a regular input): document.querySelector("input[hidden-class=" + blah + "]")
Please, see similar question - How can I know the id of a JSF component so I can use in Javascript
You can sed "id" property, but in final html code it can be not the same, but composite: for example, if your input with id="myhidden" is inside form with id="myform", final input will have id="myform:myhidden".
In the end, I used a standard HTML <input type="hidden"> tag, as I had no advantages for using the JSF one. If you're trying to set a value in a hidden input with JavaScript, I recommend using this workaround.
GWT Label widgets iterprets everything as text, not as html tags - that's good, but I would like it to interpret \n as a <br /> how do i do that.
I would make subclass, but I cant find what to override to achieve this behaviour
(I could use HTML widget, but it would interpret all tags - and all I need is an line brak)
Use an HTML widget and set its value using a SafeHtml constructed with SafeHtmlBuilder.appendEscapedLines:
HTML label = new HTML(new SafeHtmlBuilder().appendEscapedLines("foo<bar\nbaz>quux").toSafeHtml());
(alternatively, you can split("\n", -1) your text, call SafeHtml.htmlEscape on each part and join them back with a <br>, that's what appendEscapedLines does)
Another option is to use CSS, which may be sufficient in some cases where this problem emerges.
Add the CSS attribute white-space: pre or pre-wrap in the area where you display the text. It will ensure that line breaks are respected when rendering the document.
This approach has the potential to reduce some complexity, e.g. the processing of input where \n is replaced with <br/>.
You can use com.google.gwt.user.client.ui.HTML class to achieve this or simply write,
Label label = new HTML("// html code you wnat to write");
The problem to display multi-line text with HTML in XML files is that we are not allowed to use character < in the content. For example the below code cannot be compiled:
<g:HTML HTML="Line 1<br />Line2<br />Line 3" />
In my case, I declare that text as a i18n string then use in html
<ui:with field='ln' type='com.mycompany.i18n.LocalizableStrings'/>
<g:HTML HTML="{ln.EXPLAINATION}" />
Is it possible to create Ajax.ActionLink which has instead of text, the whole DIV?
I'd like to map div on Ajax.ActionLink
I don't think that this will work using the standard MVC Ajax scripts. I believe that the MVC javascript is created to use an <a> element by default. On a different note, embedding a div tag within an <a> is not valid XHTML. What are you trying to achieve?
Using Jquery is probably the easiet way you want to go. As an example:
<div onclick="SomeAjaxFunction()">some div content</div>
function SomeAjaxFunction()
{
$.get('<%= Url.Action("SomeAction", "InSomeController") %>', function(data) {
$('.result').html(data); // assuming a partial view
alert('Load was performed.');
});
}
However, if you are dead set on using MS Ajax, to work with divs, you need to possibly look at the Sys.Mvc.MvcHelpers._asyncRequest function and do some of your own re-wrapping to make it usable. I have not tried or tested this, so use at your own risk. (Stick with the Jquery, there is far better help and support available.)
I have a strongly typed partial view CheckBox.ascx that renders a checkbox. This is used by another partial view that renders a list of checkboxes using CheckBox.ascx.
I am having problems figuring out how to use the Html.Label helper method to get labels working correctly, i.e. setting the label for property to be the id of the related checkbox.
My view markup for the checkbox looks like this:
(I'm using non-sequential list binding as described under Non-Sequential Indices)
<%= Html.CheckBox(string.Format("checkBoxes[{0}].Checked", Model.Id), Model.Checked)%>
The complexity here is that my checkbox ID will be mangled - [, ], . characters replaced with _.
Can the Html.Label helper method help me here?
My solution was to manually code the label element...
<label for="<%= string.Format("checkBoxes_{0}__Checked", Model.Id)%>"><%= Html.Encode(Model.Label)%></label>
(noting that the ., [ and ] characters in the checkbox name get rendered as underscores)