So I have this JQuery template that calls a function:
<script id="Fred" type="text/x-jQuery-tmpl">
<td>${functionX()}${Field2}</td>
</script>
Works great. but now I want to pass a parameter into it, but the following won't work.
<script id="Fred" type="text/x-jQuery-tmpl">
<td>${functionX(${Field1})}${Field2}</td>
</script>
Any suggestions?
You can access Field1 directly without using ${, like:
<td>${functionX(Field1)}${Field2}</td>
figured it out:
<td>${functionX($data.Field1)}${Field2}</td>
This is another example of how the problem could be solved:
<script id="testTemplate" type="text/x-jquery-tmpl">
{{if title.length}}
<h3>${title}</h3>
<p>Start: ${ render($data) } :End</p>
{{/if}}
</script>
You can see that this method works in this link.
Related
I have a polymer element <my-element> with a computed property myProperty. I need to bind myProperty to another place in the HTML page, so I can't put it inside a dom-bind template
Here's what I mean
<html>
<body>
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</body>
</html>
I cannot wrap my-element and the usage of [[myProperty]] in a dom-bind template as this would result in nearly the entire document being enclosed in this. Attempting to use the bind as it is results in myProperty = [[myProperty]] being displayed, not the value of [[myProperty]].
Is there some way to have behaviour similar to data binding but usable across the whole HTML document? (In the future there might also be a case where [[myProperty]] is used inside an attribute such as <my-second-element my-property="[[myProperty]]">). Or if both occurences are wrapped individually in dom-bind templates is there some way to make the bind global?
Thanks in advance
Not sure why you wouldn't be able to do like this:
<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
</head>
<html>
<body>
<template is="dom-bind" id="app">
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</template>
</body>
</html>
This is totally doable. If myProperty changes inside my-element it would also change in "this" html-document. There also wouldn't be a problem adding your second element:
<my-second-element my-property="[[myProperty]]">
Unless you're missing to tell us some specific behavior that you want, this should be what you want. :)
I have wirtten following code but it does not gets executed
<liferay-ui:search-container-column-text>
<liferay-ui:input-checkbox param="<%=String.valueOf(item1.getUserId()) %>" formName="frmAllCompanyUserPanelDisplay" onClick="callAddEntry('String.valueOf(item1.getUserId())')" id="<%=String.valueOf(item1.getUserId()) %>"/>
</liferay-ui:search-container-column-text>
<script type="text/javascript">
function callAddEntry(Hello) {
alert("Hello " + Hello);
}
</script>
It gives me same output 'String.valueOf(item1.getUserId())' rather then fetching id dynamically, but when i use normal input checkbox every line of code executed fine? why?
can anyone help me out in solving this javascript problem.
Thanks in Advance.
Try following one.. need to use expression in java script function as follows
callAddEntry('<%=String.valueOf(item1.getUserId())%>')
More abut liferay have look into to www.liferaysavvy.com
<liferay-ui:input-checkbox param="<%=String.valueOf(item1.getUserId()) %>"
formName="frmAllCompanyUserPanelDisplay" onClick="callAddEntry('<%=String.valueOf(item1.getUserId())%>')"
id="<%=String.valueOf(item1.getUserId()) %>"/>
I have been pretty much in love with knockout lately, and here is my first copy-and-paste source snip :rolleyes:. Without luck, I fail to make it work on the local host server, although I already set up the knockout.js in the same directory of the file.php. I hope someone could help.
<script type="text/javascript" src="knockout210.js"></script>
<script type="text/javascript">
var ViewModel=function(first, last)
{
this.firstName=ko.observable(first);
this.lastName=ko.observable(last);
this.fullName=ko.computed(function()
{
return this.firstName()+" "+this.lastName();
},this);
}
ko.applyBindings(new ViewModel("Planet","Earth"));
</script>
<p>First Name: <input data-bind="value:firstName"/></p>
<p>Last Name: <input data-bind="value:lastName"/></p>
<h2>Hello, <span data-bind="text:fullName"></span>!</h2>
I've setup your demo on jsfiddle. It runs perfectly fine. If what you posted is the actual HTML on your page I'd suggest that you include the html, head, and body tags and make sure that knockout210.js is actually being referenced correctly. Also, if you are having trouble with php or whatever, just make a plain old HTML file and it should run.
Here is your exact code that works: http://jsfiddle.net/lucuma/wD8jE/
I have a jQuery template, and I would like to use a KnockOutJS template within this.
I cannot make this work as this example illustrates: http://jsfiddle.net/maate/bwmcR/1/.
However, it DOES work when the KnockOutJS template itself is placed outside the scope of the jQuery template as in this example: http://jsfiddle.net/maate/bwmcR/2/.
It seems that the problem is related to the scope of the template data variables (for instance, I can access the ${test} variable within the subTemplate).
Does anyone know how to make this work?
Br. Morten
The first example you have is just not valid. Although you want to create a sub-template it has to be in a separate script tag. You just can't embed templates within each other, you have to create them one after the other.
WRONG:
<script id="superTemplate" type="text/html">
...
<script id="subTemplate" type="text/html">
...
</script>
</script>
RIGHT:
<script id="superTemplate" type="text/html">
...
</script>
<script id="subTemplate" type="text/html">
...
</script>
When you applied the subtemplate on the ul, you defined what data it should be using with the foreach, so you won't be able to read the test as it is not a property on an item.
If you want you can pass it as a templateOption so it will be available on the subtemplate too.
<ul data-bind="template: { name: 'subTemplate', foreach: items, templateOptions: { testValue: 'Value' } }"></ul>
This way it will be available on the subtemplate.
<span data-bind="text: $item.testValue"></span>
Also, I wouldn't use the default jQuery template tags, it is much nicer with data-binding.
<div id="body" data-bind="template:{name: 'superTemplate'}"></div>
It will do the same, more or less, in the end. You can take a look here : http://jsfiddle.net/bwmcR/18/
On my Blogger blog I have the following code exactly, but it doesn't work. Can anyone tell me what is wrong?
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js'/>
Here is how I call the PRE tag:
<pre class="brush: powershell">
#echo off
dir C:\temp
</pre>
Aren't you referring to SyntaxHighlighter before you include the script that defines it?
It looks like you need to put the <script src=...> lines at the top.