Have a look at the following sample HTML. It is a simple KO foreach binding and a button to add a new item to the observableArray. The addition works fine and the new item shows up. However, the afterRender method is never called - not after the initial binding and not after a new item is added (and rendered). Why?
Fiddle: http://jsfiddle.net/CQNm6
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
</head>
<body>
<div data-bind="foreach: data.things, afterRender: afterRenderTest">
<h1 data-bind="text: name"></h1>
</div>
Add New Thing
<script type="text/javascript">
var Thing = (function ()
{
function Thing(p_name)
{
this.name = ko.observable(p_name);
}
return Thing;
})();
var data =
{
things: ko.observableArray(
[
new Thing("Thing One"),
new Thing("Thing Two"),
new Thing("Thing Three")
])
};
function afterRenderTest(elements)
{
alert("Rendered " + elements.length + " elements.");
}
ko.applyBindings();
</script>
</body>
</html>
Your syntax is wrong because foreach binding either take an array or an object where you specify the additional events, arguments.
From the documentaiton:
Pass the array that you wish to iterate over. The binding will output
a section of markup for each entry.
Alternatively, pass a JavaScript object literal with a property called
data which is the array you wish to iterate over. The object literal
may also have other properties, such as afterAdd or includeDestroyed...
So you need write:
<div data-bind="foreach: { data: data.things, afterRender: afterRenderTest }">
<h1 data-bind="text: name"></h1>
</div>
Demo JSFiddle.
Related
I have tried to set the value on the Autocomplete control and set the focus from java script. The value is set to the field but the list of predictions are not displayed when page is loaded.How can I also show the prediction list with the initial search string set on the field when page is loaded.Please see the below the code.
Please note as soon as user click on the control(Manually) the dropdown is displayed.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
$(document).ready(function() {
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
});
//$("#address").val('George Street');
$("#address").focus();
</script>
</body>
</html>
I have found the solution for this. I have hooked the code to set the value and set the focus on the control in the DOM Event 'load' as below
google.maps.event.addDomListener(window, 'load', function() {
$("#address").val("George Street");
$("#address").focus();
});
I currently use button and trying to launch a new window passing parameter from mypage to the new page like this
<input type="button" name="launchpg" id="launchpg" value="LaunchPage" onclick="launch_page('<%=list_process_url%>',this.form.myform.options[this.form.myform.options.selectedIndex].value);"/>
Javascript is as below:
<script type="text/javascript">
//call servlet
function launch_new_window(list_process_url,smart_id)
{
popupWindow = window.open(list_process_url+"&id="+id,'List Process Page',
'scrollbars = yes');
}
I am trying to replace button with href link as in..
document.location='main.jsp?PAGE=myPage.jsp&id='+this.form.myform.options[this.form.myfom.options.selectedIndex].value;
I would like to use the same javascript for launching a new window passing the parameter to the script function.
The code however doesn't seem to work as it says Form is not valid for href.
Add this to wherever you want to launch a new page from:
window.location.href = "pageName.html";
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="main">
<script>
$(function () {
<!--Some Logic-->
<!--window.location.href = "NewWindowName.html";-->
}
$("#btnSave").click(function () {
openNewWindow();
});
function openNewWindow()
{
window.location.href = "NewWindowName.html";
}
});
</script>
<article>
<button id="btnSave">Save Data</button>
</article>
</div>
</body>
I found a solution to my question:
Open New Window
I'm passing in a string of data from my controller into my view and accessed as such.
myview.jsp
<!DOCTYPE html>
<html>
...
<body>
<div>${myDataString}</div>
...
<div id="container"></div> <!-- js func populats this -->
How can I pass this data into a js function from within my view?
<script type="text/javascript">
$(function () {
var temp = ${myDataString}; // <-- How can I access or passin the string data?
$('#container').buildStuffWithMyDataString({
o o o
Missing single ticks
'${myDataString}' fixed it.
Below is the example where #parent.data works and the first title can be changed. But when #parent.data is replaced with ~root, test2 tag is not rendered.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.js" type="text/javascript"></script>
<script src="js/jquery.observable.js" type="text/javascript"></script>
<script src="js/jquery.views.js" type="text/javascript"></script>
<script id="test1Template" type="text/x-jsrender">
<div>{^{>title}}{{:content}}</div>
{{test2}}
<h1>{^{>#parent.data.title}}</h1>
{{/test2}}
</script>
<script id="myTemplate" type="text/x-jsrender">
{^{test1 title='Test Title 1'}}
{^{test1 title='Test Title 2'}}
{{/test1}}
{{/test1}}
</script>
<script type="text/javascript">
$.views.tags({
test1: function () {
this.tagCtx.props.content = this.tagCtx.render();
return $.templates.test1.render(this.tagCtx.props, undefined, this.tagCtx.view);
},
test2: function () {
return this.tagCtx.render();
}
});
$.templates({myTemplate: "#myTemplate",
test1: "#test1Template"
});
$(function () {
$.link.myTemplate('#container', {});
$('#editTitle').click(function () {
$.observable($.view('#container > div:first').data).setProperty('title', prompt());
});
});
</script>
</head>
<body>
<span id="editTitle">EditTitle</span>
<div id="container"></div>
</body>
</html>
~root is a reference to the data object or array you passed in initially - the top-level data. It is not the immediate parent data. In your case ~root will be the {} you passed in with the link.myTemplate() call.
Update added later: (Response to question in comment below about ~root)
From JsViews point of view, when any block tag content is rendered, it is also a 'view' - where a template is rendered against data. The views make up a hierarchy, and the top-level one is the one for which the data is exposed as ~root. So if you want to provide special short cut aliases for data at intermediate levels, you can do so, but that is for you to do. Declaratively that is done as in this example. In your case you are calling the intermediate level template render programmatically, so you can do the equivalent by providing a reference as a context variable:
return $.templates.test1.render(
this.tagCtx.props,
{mydata: this.tagCtx.props},
this.tagCtx.view);
Now you can write
<script id="test1Template" type="text/x-jsrender">
<div>{^{>title}}{{:content}}</div>
{{test2}}
<h1>{^{>~mydata.title}}</h1>
{{/test2}}
</script>
I have custom tag which can have itself as an inner tag and I want to bind it its props as data. I can change the first test tag title property and see the change but cannot do that for the inner test tag. I think it is because of the wrong arguments of this.tagCtx.content.render(). Below is the example:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.js" type="text/javascript"></script>
<script src="js/jquery.observable.js" type="text/javascript"></script>
<script src="js/jquery.views.js" type="text/javascript"></script>
<script id="testTemplate" type="text/x-jsrender">
<div>{^{>title}}{^{:content}}</div>
</script>
<script id="myTemplate" type="text/x-jsrender">
{^{test title='Test1'}}
{^{test title='Test2'}}
{{/test}}
{{/test}}
</script>
<script type="text/javascript">
$.views.tags({
test: {
render: function(){
this.tagCtx.props.content = this.tagCtx.content.render();
return this.template.render(this.tagCtx.props, this.tagCtx, this.tagCtx.view);
},
template: "#testTemplate"
}
});
$.templates({myTemplate: "#myTemplate"});
$(function () {
$.link.myTemplate('#container', {});
$('#editTitle').click(function () {
$.observable($.view('#container div:first div').data).setProperty('title', prompt());
});
});
</script>
</head>
<body>
<span id="editTitle">EditTitle</span>
<div id="container"></div>
</body>
</html>
The problem here is that the inner tag is being rendered as a string, not as a data-linked tag, since the this.tagCtx.content.render() call is simply calling the render method on the compiled template corresponding to the block content.
If you want to render as a data-linked tag, you need to call this.tagCtx.render().
In addition, in calling this.tagCtx.render() you need the tag to render its content, and not another template. Setting template: "#testTemplate" will cause the tag to use that template instead of the content. So what you need is something along these lines:
var template = $.templates("#testTemplate");
$.views.tags({
test: {
render: function() {
var tagCtx = this.tagCtx;
tagCtx.props.content = tagCtx.render();
return template.render(tagCtx.props, undefined, tagCtx.view);
}
}
});
You probably don't want to pass in tagCtx as context in the template.render(...) call. You can pass in tagCtx.ctx, or simply undefined...