what's the implementation of attaching exist html element to Ember.js view without using any template engine. ?
for example in Backbone.js i should give the view the el property
In view you can do:
didInsertElement: function () {
var domNode = this.$().get(0);
$(domNode).append('//your html element goes');
}
Related
In jQuery, I can get the element that was clicked in the DOM using the following
$(document).click(function(event) {
var element = $(event.target);
console.log(element);
....
}
How would I do the same with Angular? I've searched for it online but all of the solutions were related to elements that had an ng-click attribute like links and buttons. I'd like to listen to the click event for the entire DOM and then get the element that was clicked(p, li, a, span etc.) Is there anyway I can achieve this using Angular only or would I have to use jQuery?
Place the ng-click on the body
<body ng-click="go($event)">
In your controller:
$scope.go = function($event){
alert($event.currentTarget );
};
From the docs https://docs.angularjs.org/api/ng/directive/ngClick and https://docs.angularjs.org/guide/expression#-event-:
Event object is available as $event
html
<div ng-click="functionName()"></div>
js
$scope.functionName = function($event){}
I do an extensive use of templates, and I like to use full contained templates. I mean that I want to see in the template code all the DOM elements including the root one, like this:
<script type="text/template" id="template-card">
<div class="card box" id="card-<%= id %>">
<h2><%= title %></h2>
<div><%= name %></div>
</div>
</script>
But what Backbone likes is having a template like this:
<script type="text/template" id="template-card">
<h2><%= title %></h2>
<div><%= name %></div>
</script>
And defining the root element and its attributes in the JS code. What I think is ugly and confusing.
So, any good way to avoiding my Backbone View to wrapper my template with an extra DOM element?
I have been checking this issue thread: https://github.com/documentcloud/backbone/issues/546 and I understand there is not any official way to do it.. but maybe you can recommend me a non official way.
You can take advantage of view.setElement to render a complete template and use it as the view element.
setElement view.setElement(element)
If you'd like to apply a Backbone view to a different DOM element, use setElement, which will
also create the cached $el reference and move the view's delegated
events from the old element to the new one
Two points you have to account for:
setElement calls undelegateEvents, taking care of the view events, but be careful to remove all other events you might have set yourself.
setElement doesn't inject the element into the DOM, you have to handle that yourself.
That said, your view could look like this
var FullTemplateView = Backbone.View.extend({
render: function () {
var html, $oldel = this.$el, $newel;
html = /**however you build your html : by a template, hardcoded, ... **/;
$newel = $(html);
// rebind and replace the element in the view
this.setElement($newel);
// reinject the element in the DOM
$oldel.replaceWith($newel);
return this;
}
});
And a working example to play with http://jsfiddle.net/gNBLV/7/
Now you can also define a view's tagName as a function and create a class like this:
var MyView = Backbone.View.extend({
template: '#my-template',
tagName: function() {
// inspect the template to retrieve the tag name
},
render: function() {
// render the template and append its contents to the current element
}
});
Here's a working example
Backbone.Decarative.Views provides you with an alternative way to do this, without having to rely on setElement. For more, check out my answer here.
I want to disable scrolling by default except for specific elements and their children in an AngularJS/Cordova hybrid application.
I don't want to introduce jQuery into the app so I am trying to use Angular's jqlite (the stripped down essentials of jQuery). I'm also open to using a directive to solve the problem if you have any suggestions.
As you can see below I'm using jqlite's parent() method to see if the element's parent has the scrollable class. However this is not effective because it would be better to check the element itself and any parents up the DOM tree. jQuery has a parents() method to do this but jqlite does not.
Any ideas how to use jqlite to check all parents of an element or how to get the desired solution from a directive?
// disable scrolling by default unless inside a `scrollable` element
document.addEventListener('touchmove', function (e) {
var scrollable = false;
// todo: need to go all the way up the DOM tree instead of just one level up
var items = angular.element(e.target).parent();
angular.forEach(items, function (o) {
var item = angular.element(o);
if (item.hasClass("scrollable")) {
scrollable = true;
}
});
if (!scrollable) {
e.preventDefault();
}
}, true);
I seem to have a problem with the code below. I have a div element with the id='content' in my html. I wanted to replace 'body' element of el property with the div element but my hello world text doesn't when I typed el: $('div') or el:$('div#content') or el: $('#content'). I'm a beginner in backbone.js and in my understanding, I believe that this el property holds our parent tag where all our templates will be added as child elements(in this case 'body' tag being parent and 'p' tag being child).
(function($){
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
this.render();
},
render: function(){
(this.el).append("<p>Hello World</p>");
}
});
var listView = new ListView();
})(jQuery);
The View.el property should be defined as a jQuery selector (string), not a reference to HTML element.
From Backbone documentation:
var BodyView = Backbone.View.extend({
el: 'body'
});
Or as you wished,
el:'div#content'
When the view initializes, Backbone references the element in makes it available via the view.$elproperty, which is a cached jQuery object.
this.$el.append("<p>Hello World</p>");
The sample code you posted works, because there is always only one bodyelement, and that element already exists in the DOM when your view is rendered. So when you declare el:$('body'), you get a reference to the body element. The code in renderin works, because this.el is now a direct reference to the jQuery object:
(this.el).append("<p>Hello World</p>");
If you need to initialize a Backbone view using an existing DOM element (not a selector), Backbone documentation recommends passing it in the initialize function.
I want to be able to link a javascript object with a dom element but cant find a way for this to be done properly. An example: say when opening a page with an inventory it loads all the items contained in it and when I hover over the images inside it creates a small tooltip with some information. Well there will be much of these items on the page and i want to be able to link the DOM element with an object so i can access its properties easily. I hope im explaining my self properly.
say I had this inside an inventory:
<div id="slot1"><img id="item1"></div>
<div id="slot2"><img id="item2"></div>
and say i have a javascript object called slot1 and slot2:
the object slot1 has all the properties that need to be shown in the tooltip so i would like to do something like this in the mouseover event:
this.showTooltip()
any help would be great ty if i need to explain it better just say!
-Thaiscorpion
Use jQuery data:
$("div.hasToolTip").hover(
function() {
//Get the associated data with the DOM element
//with $(this).data(someKey)
showToolTip($(this).data('toolTipInformation'));
},
function() {
//Here you can hide all tooltips
}
);
Obviously, before you can register this event, you have to assign the object to every DOM element with $(selector).data(key, value).
These example expects that every DOM element which should have a tooltip has a class named .hasToolTip.
Look at the jQuery documentation for more information about the .data() function.
Just have the javascript object know the ID of the object it's watching.
function Tooltipper(divID) {
this.id = divID;
}
Tooltipper.prototype.showTooltip = function () {
// do tooltip stuff
$('#' + this.id).tooltip(); // assuming that it has a tooltip thing
};
var slot1 = new Tooltipper('slot1'),
slot2 = new Tooltipper('slot2');
And then:
slot1.showTooltip();
Or better yet, instead of passing in the ID, pass in the object:
var slot1 = new Tooltipper($('#slot1'));
This way you don't have to do a DOM lookup each time.