Develop Reference

How can i javascript in mustasche

I want to use javascript inside the mustache template. (test.mustache)
https://test.com/?lang=en
<script>
let query = window.location.search;
console.log(query);
</script>
I got ?lang=en with the above code.
{{#cats}}
{{{value}}}
{{/cats}}
i in this code
I want to append ?lang=en after {{link}}.
Is there any way?

No, you can't use JavaScript in your template.
The entire point of the template is to allow code to be extracted. Whatever code is currently executing your template is feeding the template a link variable, which the template is outputting via {{link}}. You need to modify that calling code so that it alters the value of link before it's passed to the template.

Ajax Load Static Rails Partial

In my rails app, I have a html template located in public/templates/_hero-1.html.erb
In my application.js.erb file, I'm trying to load that template into a div I created dynamically, before I render the entire div.
// Append component to text editor when clicked
$('.js-TemplateThumbnail').click(function() {
// Define new template container
var newTemplateContainer = $('<div class="position-relative hideChild js-TemplateContainer">');
// Insert selected template into new template container
newTemplateContainer.load("<%= 'public/templates/hero-1' %>");
// Build new template
$('.js-Canvas .js-TemplateContainer').last().after(newTemplateContainer);
});
But I'm getting a console error GET http://localhost:3000/public/templates/hero-1 404 (Not Found)

Quick answer/related SO answer: Rendering partial in js.erb file
Longer answer: There are a couple ways of doing this. You could try:
newTemplateContainer.load("<%= 'render partial: public/templates/hero-1' %>");
Not positive that will work. This feels hacky to me and also leaves you with highly coupled code. If the name of that template changes, you will have to update it in n places.
I would decouple the JS and create an internal endpoint in config/routes.rb; eg:
get templates/:id
then,
class TemplatesController < ApplicationController
def show
#template = Template.find(params[:id])
end
end
Then in your JS inside the click handler you can:
$.get('/templates/hero-1', function(data) {
// do stuff with returned data
$('.js-Canvas').html(data)
});
Very simplistic, but more so trying to outline a different approach. This also seems like something that handlebars could help with.

How to use one .js file for multiple .html pages using AngularJS

I have one function in a JS file which should ideally be used by multiple html pages. I don't want to duplicate this function to another file. Currently, my js file starts like this:
(function(){
var app = angular.module('Project1', []);
and the first html that has been using this JS is obviously called Project1.
I want 'Prject2' html to use this JS to, and I tried this:
(function(){
var app = angular.module('Project1', 'Project2' []);
However, this doesn't work. Any idea of how I can utilize this AngularJS file for multiple html pages without duplicating the desired functions?

simply add your js reference (and angular refrences) into both of your html pages
do note that add them after adding angularjs references

You can create your first module as you did in your first sample.
Your next sample can then use the 'Project1' by setting up a dependency to that module, like so:
var app = angular.module('Project2', ['Project1']);

Integrating iCanHaz and Marionette

I'm a big fan of ICanHaz, and I'm trying to directly intregrate it into a new Marionette application I'm building. However, going off this post, I have written this that reaches into the render method and changes it in Marionette:
// Set up Initalizer
APP.addInitializer(function() {
//Reach into Marionette and switch out templating system to ICH
Backbone.Marionette.Renderer.render = function(template, data){
return ich[template](data);
}
//Create Router
new APP.Routers.GlobalRouter();
//Start Backbone History
Backbone.history.start();
});
If I walk through this function, all the data seems to work fine. However, when put into use and trying to use it for layouts and Item Views, nothing gets appended or inserted. This is from my GlobalRouter:
//Grab the main Layout
var layout = new APP.Views.LayoutView();
//Render that layout
layout.render();
//Make the model
var userModel = new APP.Models.UserModel({
"user_name" : "nweingartner#awesome.com",
"tenant" : "Ginger Ale is Great"
});
//Make the Header Region
var headerRegion = new APP.Views.HeaderView({model: userModel});
layout.header.show(headerRegion);
This all happens in a method that gets called when index is hit. There are no JS errors so I have nothing to go on. However, it in the render function I append the data to the body, it will add (however ruining my layout and region structure).
I am storing my templates in index.html.
Can anyone help with this?

Okay, I couldn't find an easy way to do this using ICH. However, due to another SO I found, very similar functionality can be found just using Mustache.
Using this code:
Backbone.Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {
return Mustache.compile(rawTemplate);
}
Lets you change the renderer so you can pull mustache templates from index.html using Marionette's template call. A mustache template looks like this:
<script id="headerTemplate" type="text/template">
<p>{{user_name}}</p>
<p>{{tenant}}</p>
</script>
The difference is that the type is 'text/template' as opposed to 'text/html'. Otherwise it acts very similar.
Hope this helps someone else.

Zend headScript() and appendFile not working as expected

I'm having an issue trying to append a javascript file using headScript()->appendFile('file name') with Zend. I have my layout setup like this:
<?= $this->headScript()
->prependScript( 'BASE_URL = "' . $this->baseUrl() . '";' )
->appendFile( $this->baseUrl('js/lib/jquery/jquery-1.4.2.min.js') )
->appendFile( $this->baseUrl('js/admin.js') );
?>
Then, in my controller I am trying to append an additional js file only for this page, like:
$this->view->headScript()->appendFile( 'another/js/file.js' );
This file needs to be appended to what is already setup in the layout. However, this file gets added before the other 'appendFile' files. I've also tried
$this->headScript()->offsetSetFile(999, '/js/myfuncs.js');
But this still adds the file before the other files. This is not how I would expect this to work, especially when using the offsetSetFile method. How can I add this file after the other files? Thanks.

The answer is to use headScript()->prependFile in layout.phtml and headScript()->appendFile in a view.

I know it's a late answer but!
If you do appendFile or appendScript is uses the next available index. Thus
$this->headScript()->offsetSetFile(50, 'file');
$this->headScript()->appendFile('file2');
is equivalent to
$this->headScript()->offsetSetFile(50, 'file');
$this->headScript()->offsetSetFile(51, 'file2');
Also it is key to note that the controller code get executed first before the view/layout code. Thus in your case your appends are actually using the id's 1000, and 1001. A quick fix to this is just to explicitly use offsetSetFile for all your appends. So your code in your layout would look like:
<?=
$this->headScript()
->prependScript( 'BASE_URL = "' . $this->baseUrl() . '";' )
->offsetSetFile(500, $this->baseUrl('js/lib/jquery/jquery-1.4.2.min.js') )
->offsetSetFile(501, $this->baseUrl('js/admin.js') );
?>
I hope this helps future googler's

I've noticed that if I 'prepend' all the files in the layout, I can then use appendFile in my controller and it will appear after them. Unfortunately, then I have to list all my JS files in reverse order in the layout (since they prepend to themselves). I'd really like to keep things in order and just be able to append to my layout stack.

If prepending in the layout file is not good enough, you can either include the files in your bootstrap when you set up your view or you could set up a controller plugin if you need to prepend based on what module is being loaded.
// in your bootstrap
protected function _initHeadScript()
{
$this->bootstrap('view');
$view = $this->getResource('view');
$view->headScript()->appendFile('another/js/file.js');
}
// as a plugin
class My_Plugin_HeadScriptPlugin extends Zend_Controller_Plugin_Abstract
{
public function routeStartup(Zend_Controller_Request_Abstract $request)
{
$view = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer')->view;
if($request->getModuleName() == 'foo')
{
$view->headScript()->appendFile('another/js/file.js');
}
}
}

Actually, you don't need get the baseUrl 'cause ZF already does it for you. You just have to pay attention to your path. Do not use the first slash! otherwise ZF will return the remote address.
Just use '$this->_view->headLink()->appendStylesheet('css/main.css');'

http://zendframework.com/issues/browse/ZF-3282?focusedCommentId=23552&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-23552
the last comment gives an excellent solution, first include in the layout at top, then print when you need it, this way it will work