Can I have a script only component in Polymer to hold all my helper functions used across application? I am not sure what is the recommended way of having reusable functions, constants that can be imported across components ?
<dom-module id="helper-functions">
<script>
(function() {
var helper1 = function() { ... };
var helper2 = function() { ... };
Polymer({
is : 'helper-functions'
});
})();
</script>
</dom-module>
You "could" do this, but it depends on what those helper functions are doing and whether they need any "Polymer" features.
One way to package up this sort of thing is as a "behavior", and seems to be the way that the Polymer Elements themselves are doing things. Split your helpers into functional areas and make each a separate behavior, and then include the behavior in those elements that need it. Here's an example to show how its done (I am including all my behaviors in the PAS namespace.
<link rel="import" href="../polymer/polymer.html">
<script>
window.PAS = window.PAS || {};
(function() {
'use strict';
var dialogs = [];
PAS.DialogBehaviour = {
attached: function() {
dialogs.push(this); //Capture all dialogs as they start up
},
_requestClose: function() {
this.async(function() { //Wait a second to allow inflight ajax to have a chance to finish
dialogs.forEach(function(dialog) {
if (dialog !== this) {
dialog._forceClose();
}
},this);
},1000);
},
_forceClose: function() {
//abstract
}
};
})();
</script>
I then include it in my elements like ...
Polymer({
is: 'pas-standin',
behaviors: [AKC.Route,PAS.DialogBehaviour,Polymer.NeonAnimatableBehavior],
listeners: {
'pas-error': '_closeDialog'
},
But for pure javascript functions, I have added my helper functions in my app.js file. I don't have that many at the moment, and I suspect if I did it would be a sign that I haven't designed the right elements.
Related
In Meteor v0.8.2, it appears that helpers must be created for the individual templates (Template.story_en, Template.story_ne) called by the dynamic template.
Is it possible to create helpers for just the dynamic template (Template.story) and avoid repeating it for all possible templates that the dynamic templates can use, such as in the example below? It appears that the method I'm using requires a lot of repeated code.
story.html
<template name="story">
{{> UI.dynamic template=storyTemplate}}
</template>
story.js
Template.story.storyTemplate = function() {
return "story_" + Session.get('lang')
}
// This does not work
Template.story.color = function() {
return '#f00'
}
// This works
Template.story_en.color = function() {
return '#f00'
}
// This works (but seems to be unnecessary code)
Template.story_ne.color = function() {
return '#f00'
}
You could use global helpers, or pass the helpers in as data
Using Global Helpers (work on every template you have)
UI.registerHelper("color", function() {
return '#f00'
});
Or Passing in the helpers as data (does not work under current version of iron router - open bug).
Template.story.helpers({
dataHelpers: function() {
var data = UI._templateInstance().data || {};
//Add the helpers onto the existing data (if any)
_(data).extend({
color: function() {
return "#f00";
}
});
return data;
});
});
Then the html:
<template name="story">
{{> UI.dynamic template=storyTemplate data=dataHelpers}}
</template>
Then in the subtemplates you can use {{color}} without having the helpers in them.
You could also try your luck with using this instead of UI._remplateInstance.data if you have iron-router issues.
To keep organized, I'd like to keep all the javascript for my site in a single file:
scripts.js
However, some of my scripts are only used on on some pages, other scripts are only used on other pages.
In my document-ready function it looks like this:
function home_page() {
// image rotator with "global" variables I only need on the home page
}
$('#form')... // jQuery form validation on another page
The problem with this, is that I am getting javascript to execute on pages it's not even needed. I know there is a better way to organize this but I'm not sure where to start...
One thing you could do would be to use classes on the <html> or <body> tag to establish the type of each page. The JavaScript code could then use fairly cheap .is() tests before deciding to apply groups of behaviors.
if ($('body').is('.catalog-page')) {
// ... apply behaviors needed only by "catalog" pages ...
}
Even in IE6 and 7, making even a few dozen tests like that won't cause performance problems.
I usually do something like this, or some variation (a little pseudo code below) :
var site = {
home: {
init: function() {
var self=this; //for some reference later, used quite often
$('somebutton').on('click', do_some_other_function);
var externalFile=self.myAjax('http://google.com');
},
myAjax: function(url) {
return $.getJSON(url);
}
},
about: {
init: function() {
var self=this;
$('aboutElement').fadeIn(300, function() {
self.popup('This is all about me!');
});
},
popup: function(msg) {
alert(msg);
}
}
};
$(function() {
switch($('body').attr('class')) {
case 'home':
site.home.init();
break;
case 'about':
site.about.init();
break;
default:
site.error.init(); //or just home etc. depends on the site
}
});
I ususally have an init() function that goes something like this:
function init() {
if($('#someElement').length>1) {
runSomeInitFunction()
}
... more of the same for other elements ...
}
Basically just check to see if the element exists on the page, if it does, run its own initialization function, if not, skip it.
The whole JS codes is cached by the browser after the first page load anyway, so there's no point in fragmenting your JS file down into page-specific pieces. That just makes it a maintenance nightmare.
You could use for each page object literals to get different scopes.
var home = {
other: function() {
},
init: function() {
}
};
var about = {
sendButton: function(e) {
},
other: function() {
},
init: function() {
}
}
var pagesToLoad = [home, about];
pagesToLoad.foreach(function(page) {
page.init();
});
In my app, the <body> tag contains just a single <script type="text/x-handlebars> tag which contains all my views. Sproutcore 2.0 nicely adds a jQuery on-document-ready handler that parses those templates and renders them back into the DOM.
I'd like to call a function on one of the views as soon as it's rendered. The problem is that the re-insertion happens asynchronously, so I don't know when the view is available.
Example
Page
<body>
<script type="text/x-handlebars">
...
{{view "MyApp.TweetInputView"}}
...
</script>
</body>
View:
MyApp.TweetInputView = SC.View.extend({
init: function() {
// act like a singleton
MyApp.TweetInputView.instance = this;
return this._super();
},
focus: function() {
...
this.$().focus();
}
});
Initializer
// if the URL is /tweets/new, focus on the tweet input view
$(function() {
if (window.location.pathname === '/tweets/new') {
// doesn't work, because the view hasn't been created yet:
MyApp.TweetInputView.instance.focus();
}
});
I've also tried SC.run.schedule('render', function() { MyApp.TweetInputView.instance.focus(); }, 'call'); in the hopes that Sproutcore would run that after all the view rendering and insertion, but that does not seem to be the case.
Try this:
MyApp.TweetInputView = SC.View.extend({
didInsertElement: function() {
console.log("I've been rendered!");
}
});
I have two web page(a.php & b.php). They have very similar logic but distinct UI. I wrote two javascript.
They both look like:
aUI = {
displayMessage = function ...
showDetails = function ...
}
function foo() {
aUI.displayMessage();
aUI.showDetails();
// and other things about aUI.displayMessage() and aUI.showDetails()...
}
foo();
aUI.displayMessage() is different from bUI.displayMessage(). But a.js and b.js have the same foo().
I extracted foo(). So now I have three .js: aUI.js, bUI.js and logic.js.
logic.js:
function foo() {
UI.displayMessage();
UI.showDetails();
//other things about UI
}
foo();
aUI.js and bUI.js:
UI = {
displayMessage = function ...
showDetail = function ...
}
How can a.php know it should use aUI.js? I wrote the plain implement:
<script type="text/javascript" src="aUI.js"></script>
<script type="text/javascript" src="logic.js"></script>
It works but seems not clever. I have duplicated namespace 'UI' in a project.
Is there a better way?
What about this?
aUI.js and bUI.js have there own namespace like aUI and bUI.
And add some more code like this:
<script type="text/javascript" src="aUI.js"></script>
<script type="text/javascript">
var UI = aUI;
</script>
<script type="text/javascript" src="logic.js"></script>
This approach resolves the problem about duplicated namespace 'UI'. I think this is kind of DI.
This sounds like a classic problem to be solved by inheritance. You can do this any number of ways in javascript. Here are a few examples.
Classical inheritence: http://www.crockford.com/javascript/inheritance.html
Prototypal inheritence: http://javascript.crockford.com/prototypal.html
dojo.declare: http://docs.dojocampus.org/dojo/declare *
If you did this in Dojo, for example, it would look like this
ui-base.js
dojo.declare("_UI", null, {
displayMessage: function() { },
showDetails: function() { },
foo: function() {
this.displayMessage();
this.showDetail();
}
});
ui-a.js
dojo.declare("UI", _UI, {
displayMessage: function() { /* Override and define specific behavior here */ },
showDetails: function() { /* Override and define specific behavior here */ }
});
ui-b.js
dojo.declare("UI", _UI, {
displayMessage: function() { /* Override and define specific behavior here */ },
showDetails: function() { /* Override and define specific behavior here */ }
});
Then, in your PHP, you just include the appropriate javascript files
a.php
<script src="ui-base.js"></script>
<script src="ui-a.js"></script>
b.php
<script src="ui-base.js"></script>
<script src="ui-b.js"></script>
* The world has too many jQuery examples to make yet another, so you get Dojo this time around ;)
The solution is to architect your code that you don't need to do this and duplicate code.
But if you want to stick with it then you can create a file called logic.php and inside do something like this
header("Cache-Control: no-cache");
$currentScript = reset(explode(".", end(explode("/", $_SERVER["SCRIPT_NAME"]))));
read_file("scripts/" . $currentScript . ".js");
echo "\n;\n";
read_file("scripts/logic.js");
and in html
<script type="text/javascript" src="logic.php"></script>
this way the script will change it's content because it will concatenate the required script based on it's name and the content of logic.js. The downside of this is thatit invalidates the caching of the browser.
Another solution will be to synchronously load in logic.js the other module you need. You can get the name of the script from document.location.href
I'm writing a simple jQuery plugin, but I'm having trouble being able to use multiple instances on a page.
For instance, here is a sample plugin to illustrate my point:
(function($) {
$.fn.samplePlugin = function(options) {
if (typeof foo != 'undefined')
{
alert('Already defined!');
} else {
var foo = 'bar';
}
};
})(jQuery);
And then if I do this:
$(document).ready(function(){
$('#myDiv').samplePlugin({}); // does nothing
$('#myDiv2').samplePlugion({}); // alerts "Already defined!"
});
This is obviously an over-simplified example to get across the point. So my question is, how do I have two separate instances of the plugin? I'd like to be able to use it across multiple instances on the same page.
I'm guessing that part of the problem might be with defining the variables in a global scope. How can I define them unique to that instance of the plugin then?
Thank you for your guidance!
I have the very same problem but i find a very handy solution i´ll post it for someone who may have this problem
when you define your variables insinde the plugin you could use the .data() to store all the variables you define
like this
(function($) {
$.fn.samplePlugin = function(options) {
var base = this;
this.foo // define foo
// do stuff with foo and other variables
// Add a reverse reference to the DOM object
this.data("pluginname", base);
};})(jQuery);
And when you want to use the same foo variable you should retrive the reference with this:
base = this.data("pluginname");
base.foo
Hope it helps
Logan
html:
<code class="resize1">resize1</code>
<code class="resize2">resize2</code>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.resize1').ratiofix({message:'resize1'});
$('.resize2').ratiofix({message:'resize2'});
});
</script>
I have found 2 solutions - the first one is jquery widget factory
http://jqueryui.com/widget/
js code:
$.widget("custom.ratiofix",{
options:{
message:"nothing"
},
_create:function (){
var self=this;
this.setListeners();
},
setListeners:function (){
var self=this;
$(window).on('resize',$.proxy(self.printMsg,self));
},
printMsg:function (){
console.log(this.options.message);
}
});
And the second (without widget factory):
(function ($){
var Ratiofix = {
init: function(options, elem) {
this.options = $.extend({},this.options,options);
this.elem = elem;
this.$elem = $(elem);
this.setListeners();
return this;
},
options: {
message: "No message"
},
printMsg: function(){
console.log(this.options.message);
},
setListeners:function (){
var self=this;
this.$elem.on('click',function (){
console.log(self.options.message);
});
$(window).on('resize',$.proxy(self.printMsg, self));
}
};
$.fn.ratiofix=function (options){
this.init= function(options, elem) {
this.options = $.extend({},this.options,options);
this.elem = elem;
this.$elem = $(elem);
return this;
};
if ( this.length ) {
return this.each(function(){
var ratiofix = Object.create(Ratiofix);
ratiofix.init(options, this);
$.data(this, 'ratiofix', ratiofix);
});
}
};
})(jQuery);
In both cases plugins work separately and have own settings. In my case - 2 widgets listen to window resize and print to console own options.message
I'm not sure what you mean by having more than one instance of a plugin. A plugin would be available to use on any element.
This comment doesn't clarify much for me:
So say that it was a plugin that took
a "color" parameter and turned the
object into that color. Well, in that
case you'd need multiple instances, as
you're dealing with more than one page
element turning more than one color.
In this case, you would pass in different colors are arguments as needed:
$('div#foo').makeColor('red');
$('div#bar').makeColor('blue');
Each time you call the plugin, it will use whatever arguments you give it. The plugin isn't a class that needs instances.
Just throwing my solution in here:
(function ($){
$.fn.plugin = function (options){
var settings = $.extend({}, $.fn.plugin.defaults, options);
settings.that = $(this);
$.fn.plugin.init (settings);
};
$.fn.plugin.defaults = { objval: 'default' };
$.fn.plugin.init = function (settings){
settings.that.val (settings.objval);
};
}( jQuery ));
$('#target1').plugin ({objval: 'not default'});
$('#target2').plugin ();
DEMO
The settings variable is isolated every time you initialize the object.
To answer your question directly, you can use jQuery.noconflict() to avoid namespace collisions and thus potentially have multiple instantiations on a page..
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function() {
// etc
check here
But I question your design. Why are you writing a plugin that appears to not operate on a jQuery wrapped set ? .. Plugins should be written to assume they are operating on a jQuery array held in 'this'. In which case any state can be stored in each of the items being acted upon... But maybe you are building something different?
Please review this page
instead of writing this
$("#divid1").samplePlugin();
$("#divid2").samplePlugin();
you can do this way
$.plugin('samplePlugin1', samplePlugin);
$("#divid1").samplePlugin1();
$.plugin('samplePlugin2', samplePlugin);
$("#divid2").samplePlugin2();
You can have much details from here
http://alexsexton.com/?p=51
You need to use this.foo instead of var foo, so that the variable is only related to the current object.
This worked a treat for me! I had specific parameters for which pages/places I wanted to run a plugin and was able to achieve success by using a simple if statement. Hope this helps someone!
<!-- Begin JQuery Plugin Foo -->
<script src="js/foo_fun.js"></script>
<?php
if(substr_count(strtolower($currentUrl),"member")>0)
{
?>
<script>
$(document).ready(function(){
$('#vscroller').vscroller({newsfeed:'news_employee.xml', speed:1000,stay:2000,cache:false});
});
</script>
<?php
}
else
{
?>
<script>
$(document).ready(function(){
$('#vscroller').vscroller({newsfeed:'news_company.xml', speed:1000,stay:2000,cache:false});
});
</script>
<?php
}
?>
<!-- End JQuery Foo-->
I had the same problem : how to use many instances of a plugin on only one form ?
The usual way fails because in fact, the instance is not an instance of the plugin : it is an instance of jQuery.
So, if more than one element is defined to be managed by a plugin, each definition overrides the previous parameters.
It was necessary to have a look on the problem from another side.
A plugin is usually made to react on a specific event for a specific element. e.g.. onclick on a button, or when the mouse is over the element.
In my case, I had to use an autocomplete plugin for a city field, but my form has 5 tabs and in total 4 fields for the cities for 4 different parts of the information to be collected.
For each fields, parameters are specifics.
By the way, I've realised iI don't need to have the plugin active everytime : just on the appropriate event on the field is enough.
So I had an idea : an event manager for each element. When the event appends, so I define the plugin action.
Some code will be more efficient to explain : imagine you have 3 div blocks and your plugin must change the colours, but with specifics colours depending on which div is affected.
$(document).ready(function(){
// Wich elements are affected by the plugin
var ids = ['myDiv1','myDiv2','myDiv3'];
// foe each one :
for (v in ids)
{
//define from an event :
$('#'+ ids[v]).focus(function()
{
// depending which id is active :
var aParams, idDiv = $(this).attr('id');
// Choosing the right params
switch(idDiv)
{
case 'myDiv1':
aParams = {'color': '#660000', 'background-color': '#0000ff'};
break;
case 'myDiv2':
aParams = {'color': '#006600', 'background-color': '#ff00ff'};
break;
case 'myDiv3':
aParams = {'color': '#000066', 'background-color': '#ff0000'};
break;
default:
aParams = {'color': '#000000', 'background-color': '#ffffff'};
};
// Defining the plugin on the right element with the right params
$(this).myPlugin(
{
colors: aParams
});
});
}
});
And this works fine.
Sorry if my English is not perfect - I hope you understand well.