I've just started out using backbone. I want to apply a view to a button, but when I open my file in the browser there is nothing there.
Why isn't the button being rendered?
HTML:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
</body>
</html>
View:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $(".cta-ajax"),
template: _.template($("#button-test").html()),
initialize: function(){
console.log("Started!");
},
render: function() {
this.$el.html(this.template());
console.log("rendered");
return this;
}
});
var TView = new ButtonView();
});
You have two issues with your code. Here is a working jsfiddle: http://jsfiddle.net/cj4zkyow/1/
Issue 1:
Aside from implementing the initialize function, you also need to call render within initialize. Otherwise you have to call render manually.
Issue 2:
Second issue is that you set the el attribute of your view to .cta-ajax, but the element does not exist. It is part of your template. The el attribute is the element that your view gets appended to. So you need to use something that exists in the DOM.
HTML:
// Need a element to append view to.
<div id="test"></div>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
Javascript:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// If you specify, el, it should be an element in the DOM, not in your template.
el: $("#test"),
template: _.template($("#button-test").html()),
initialize: function(){
// Need to call render in initialize function to render view.
this.render();
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var TView = new ButtonView();
});
Related
I'm trying to get a function to run when some element on the page is loaded
<img src="" onload="myfunction()">
<footer>
<script src="main.js"></script>
</footer>
Now, the problem is that the page is trying to load the function before the js file is loaded
Do I have a solution other then loading the js file in the header??
I'd have a tiny function that just waits until the JS file is loaded, and then call the function in the JS file. Example:
<img src="" onload="stateCheck()">
<script>
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') { // could use = 'interactive' too
clearInterval(stateCheck);
myfunction()
}
}, 100);
</script>
<script src="main.js"></script>
In the index.html I use:
<template is="dom-bind" id="app">
In a normal dom-module I use:
<script>
(function() {
'use strict';
Polymer({
is: 'my-xxxx',
properties: {
/* location for properties */
}
Where do I define the properties used in the template dom-bind (f.i to have an observer attached to them?
Based on Polymer docs, you'd use JavaScript (inline or imported in index.html) to add template properties inside of an event handler for the template's dom-change event. For example, you could add a message property to the template with this script:
var t = document.getElementById('app');
t.addEventListener('dom-change', function() {
t.message = 'Hello world!';
});
See demo below:
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<template is="dom-bind" id="app">
{{message}}
</template>
<script>
var t = document.getElementById('app');
// The dom-change event signifies when the template has stamped its DOM.
t.addEventListener('dom-change', function() {
// auto-binding template is ready.
t.message = 'Hello world!';
});
</script>
</body>
jsbin
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 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...
Tried several methods but still unable to get Google Ad to render. The intention is to responsively place ads based on window width. But I'm unable to place even a single ad.
Here's the most reliable method I can think of:
/* templates.html */
<head>
<script type="text/javascript">
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script>
</head>
<body>
<div class="container">
{{> page}}
</div>
</body>
<template name="page">
<div class="page_ad"></div>
</template>
/* client.js */
Template.page.rendered = function(){
googletag.cmd.push(function() {
googletag.defineSlot('LEADERBOARD', [728, 90], 'AD-CODE-ID').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
$('.page_ad').html("<div id='AD-CODE-ID' style='width:728px; height:90px;'>");
googletag.cmd.push(function() { googletag.display('AD-CODE-ID')});
};
Thanks for your consideration.
Here is how I do it. You can read more about it in this blog post.
Template.MyAds.rendered = function() {
$.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", function() {
var ads, adsbygoogle;
ads = '<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-72414***074839" data-ad-slot="4009***57" data-ad-format="auto"></ins>';
$('.leaderboard').html(ads);
return (adsbygoogle = window.adsbygoogle || []).push({});
});
};
Check out the iframe solution here; Meteor JS: use external script
Check out the information about that method being against TOS; http://productforums.google.com/forum/#!category-topic/adsense/adsense-basics-and-policies/JP6vrWxFMVg