I have an interesting problem. Ive had a handlebars.js template thats been working for a week and just stopped. I was hoping someone might have an idea as to why.
Heres the template
<script id="banners-template" type="text/x-handlebars-template">
<div class="banner-container" >
{{#banners}}
<ul class="banner" >
<li><div class="checkbox"></div></li>
<li>{{publisher_status}}</li>
<li>Test Link</li>
<li><img class="banner" src="{{imageurl}}"/></li>
<li>{{description}}</li>
<li>{{width}}x{{height}}</li>
</ul>
{{/banners}}
</div>
</script>
Heres the code that works with this.
var bannersRawTemplate = $("#banners-template").html();
var bannersTemplate = Handlebars.compile(bannersRawTemplate);
data = '{"banners":[{"type":"banner","width":125}]}';
alert(bannersTemplate(data));
I realize that type is not accessed in the template above but it shouldnt matter. I should still get the code inside of the "banners" array loop displayed once. This is not the case. The only part of the template that displays is . Its like its not seeing the banners array inside the JSON.
Any ideas?
Thanks in advance.
Is there a particular reason you don't pass in the actual JSON, and instead pass a string? From my experience with Mustache, and a cursory review of the Handlebars.js documentation, you should be passing:
JSON.parse('{"banners":[{"type":"banner","width":125}]}');
And, assuming the code you've shown is "really real", why not just:
{"banners":[{"type":"banner","width":125}]}
This is, of course, assuming that the issue really isn't that you've got a list with just one element.
Related
I'm trying to add a class when hovering the li element in the code below with Angular
<li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}">
<a href="interna.html">
<img src="assets/images/cola.png">
</a>
</li>
This is all the functionality the page will have, so I though maybe it is not necessarily to add a new js file for the js.
When the mouse enter to the li it should have the new class selected. The code above it is not working, and I cannot figure out why.
Here is an example of my code on a fiddle: https://jsfiddle.net/mjrmeffc/
Why do you need an extra file if you can write the logic in your angular application?
I assume you make use of ng-app and have a so called javascript file where your logic is, and you should include it in here.
Here is an example of the proper way of adding/removing a class.
<div ng-app>
<div
class="italic"
ng-class="{red: hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
Test 1 2 3.
</div>
</div>
NB I found this in another stackoverflow question, please make proper use of google search first, I don't have enough reputation to flag your question, or to make a comment.
* EDIT *
It seems like you're not yet familiar with AngularJS. You need to include your 'app.js' or 'script.js' whatever you want to call it. In there you define your application using
var app = angular.module('yourappname', [/* add your dependencies here*/]);
//Other logic like controllers or services
And your HTML should be
<div ng-app="yourappname">
<div ng-controller="yourController">
PLEASE ORIENTATE YOURSELF FIRST BEFORE YOU START ASKING QUESTIONS
Try using ng-mouseover attr
<li ng-mouseover="hoverIn()" class="pull-left" ng-class="{{applyClass}}">
write a function hoverIn() in your script and assign value when hover over
$scope.hoverIn = function() {
this.applyClass = "red";
}
Working Demo
I'm new to JavaScript, and for school I have to automatically make every <\h1> on my page generate into an "ol" with in every "li" a link to the place on my page where that header is placed so in the end I have a table of contents with links on every "li". So I should be able to just write text and not worry about the table of contents. Is there a way to do this without using too complixated code? And preferably not very long so I can understand it.
e.g.
<h1 id="h1-01">Title 1<\h1>
<h1 id="h1-02">Titel 2<\h1>
<h1 id="h1-03">Titel 3<\h1>
<h1 id="h1-04">Titel 4<\h1>
Make this generate like:
<ol>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
</ol>
edit:
I don't want anyone to make all of my homework, this is just a tiny tiny part of the homework even. What I want to know is how do I make an organized list with list items in javascript without too complicated code. I already found a way to put every header text in a variable.
This is what I have
function generate(){
var titels = new Array();
for(var i = 1;i<10;i++){
var test = 'h1-0'+ i;
titels[i] = document.getElementById(test).textContent;
}
}
-->
</script>
The only problem is now that I have to make a list with these variables, but I haven't found anything usefull on the internet, everything that I've found uses Jquery ir is specific for someone's problem. I would also like a way to count the amount of headers I'm using but tthat's another question. Is it actually even possible to have code that gets literally implemented like I'm writing it?
like:
html.write("<ol>");
for(var i = 1, i<10,i++){
html.write("<il>" + titels[i] + "<\il>");
}
html.write("<\ol>")
I'm not going to do your homework, but will point you in a good direction.
Try building an object containing the id and the title of each entry. From there, you can use that object to build practically anything, including an ordered list.
Of course, you can hard-rewrite the h1 tags into list items, but that's just not the proper way to do it and not something you should learn from.
A start hint:
You could do it with the help of jquery.
Like this HTML:
<ol id=contents></ol>
<h1>Test</h1>
bla bla
<h1> Test2 </h1>
Ble ble ble
Jquery:
$(document).ready(function(){
$("h1").each(function(){
$("#contents").append("<li>" + $(this).html() + "</li>");
});
});
angular.js is great for complex client side JavaScript based web applications, but I also thinking about to use it for smaller simple JavaScript tasks.
For example I have a list with some items:
<ul>
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
Now I want to add some buttons to the HTML which should filter and/or sort the list after some user input, which should be an easy task.
Is there any way to extract the data from existing HTML elements to use them with angular.js? The data need to be in the HTML, so search engine could also get a hold of whats
Edit for clarity:
The end result would be that the data from the ul list will be pushed into a model of the controller that handling the list. ([{id:1, text:"Foo"}, {id:2, text:"Bar"}])
If I push more objects into the model, the list should display them.
If I apply a filter to the model it should filter the li elements.
Best case scenario would be something similar to this:
<div ng-model="data">
<ul ng-repeat="object in data | filter:filterCriteria">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
<li data-id="{{object.id}}">{{object.text}}</li>
</ul>
</div>
Okay. Apparently there is no way to this in a default Angular.js application.
I ran into the same problem in a project I'm working on. My solution was to add the data from the html to a variable in my angular controller and then hide the initial html. This method keeps the original list in the html for SEO, old browsers and users without javascript. It replaces this list with an angular generated one for other users.
A working example using your code is pasted below or you can see it at this link.
I'm aware this is an old question so my answer might not be of help to the initial poster. My solution is aimed at anyone else who runs into the same problem we did.
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app">
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Ctrl($scope) {
$scope.objects = [];
$scope.init = function(){
$("ul.data").hide();
$("ul.data li").each(function(){
var $this = $(this);
var newObject = {
name: $this.html(),
id: $this.attr("data-id")
};
$scope.objects.push(newObject);
});
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl" ng-init="init()">
<ul>
<li ng-repeat="object in objects" data-id="{{object.id}}">{{object.name}}</li>
</ul>
<ul class="data">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
</div>
</div>
</body>
</html>
If I am understanding the question correctly, you could just use the angular.element().scope for the html element in question.
I use this method for certain interaction that can't be handled directly out of the box with angular.
I want to implement a jQuery plugin that converts a selector to HTML. I understand that the mapping between these two syntaxes is many-to-many, but simple selectors would be easy to covert to HTML.
Example:
$('div#my-id.my-class').create();
might generate:
<div id="my-id" class="my-class" />
EDIT:
The purpose is to create an element if the selector returns an empty set, without having to add redundant code.
var jqs = $('div#my-id');
if(jqs.length===0) jqs = jqs.create();
var elementWillAlwaysBeThere = jqs.get(0);
i know this might not be what you are lokking for. the project zen coding is about using a css like syntax to create dom structurs. so i think lokking at there source is going to help you alot, even thou its not pure css selectores.
div#wrapper>ul#imageSlider>li.image$*3 compiles to:
<div id="wrapper">
<ul id="imageSlider">
<li class="image1"></li>
<li class="image2"></li>
<li class="image3"></li>
</ul>
</div>
so if you where to use the jQuery port you can do youre example like
$.zc("div#my-id.my-class") again resulting in
<div id="my-id" class="my-class"></div>
happy source reading
The following is a part of jstree, http://www.jstree.com/ code.
And I have a couple of questions about this javascript/jquery to ask. (actually pretty much all)
$('#pages-wrapper').tree({
callback:{
"onchange":function(node,tree){
document.location='pages.php?action=edit&id='+node.id.replace(/.*_/,'');
},
"onmove":function(node){
var p=$.tree.focused().parent(node);
var new_order=[],nodes=node.parentNode.childNodes;
for(var i=0;i<nodes.length;++i)new_order.push(nodes[i].id.replace(/.*_/,''));
$.getJSON('/ww.admin/pages/move_page.php?id='+node.id.replace(/.*_/,'')+
'&parent_id='+(p==-1?0:p[0].id.replace(/.*_/,''))+'&order='+new_order);
}
Q1. What $ in var p=$.tree is doing?
Q2. What is .parent(node) referencing to?
Q3. Is this line, var new_order=[],nodes=node.parentNode.childNodes; declearing two variables at the same time? And what is node.parentNode.childNodes doing?
Thanks in advance.
The followings are additional codes.
html is the following
<div id="pages-wrapper">
<ul>
<li id="page_24">
<ins> </ins>Home
</li>
<li id="page_25">
<ins> </ins>Second Page
</li>
<li id="page_30"><ins> </ins>Information
<ul>
<li id="page_31"><ins> </ins>Illustration</li>
</ul>
</li>
....
....
move_page.php
require '../admin_libs.php';// this one does all the db queries
$id=(int)$_REQUEST['id'];
$to=(int)$_REQUEST['parent_id'];
$order=explode(',',$_REQUEST['order']);
dbQuery("update pages set parent=$to where id=$id");
for($i=0;$i<count($order);++$i){
$pid=(int)$order[$i];
dbQuery("update pages set ord=$i where id=$pid");
echo "update pages set ord=$i where id=$pid\n";
}
What $ in var p=$.tree is doing?
$ is a helper object used by the popular javascript frameworks jQuery, prototype etc.
$.tree is referring to a extension tree which is defined somewhere.
What is .parent(node) referencing to?
Looks like it finds the parent node for of the currently selected node, to know the parentID which is passed to the php script. (You will need to let us know what the tree framework you are using...)
Is this line, var
new_order=[],nodes=node.parentNode.childNodes;
declearing two variables at the same
time?
Yes, it is declaring 2 seperate variable on the same line which is legel Javascript.
And what is
node.parentNode.childNodes doing?
It gets the list of the sibling elements for the current node selected.