I have a paging function since it's a little bit tricky to do it in the templates. The problem is that if I place it like this:
{{ paging( rows, limit, offset ) }}
It will obviously escape the output , so I tried with triple-stache and the output is as expected. But then, it wont detect on-click events anymore.. any suggestions ?
A workaround I thought about is setting jQuery to detect the click event on the .pagination > li but I just wanted to ask if there's any way RactiveJS can do that for me or I'm just missing something.
Have a great day !
Use a partial if you want to add dynamic templating:
data: {
foo: 'foo',
paging: function(x){
var template = '<li on-click="clicked()">' + x + '</li>';
if (!this.partials.paging) {
this.partials.paging = template;
}
else {
this.resetPartial('paging', template);
}
return 'paging';
}
},
See http://jsfiddle.net/fz7adjm4/
Related
I would like to use a javascript loop to create multiple HTML wrapper elements and insert JSON response API data into some of the elements (image, title, url, etc...).
Is this something I need to go line-by-line with?
<a class="scoreboard-video-outer-link" href="">
<div class="scoreboard-video--wrapper">
<div class="scoreboard-video--thumbnail">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="scoreboard-video--info">
<div class="scoreboard-video--title">Pelicans # Bulls Postgame: E'Twaun Moore 10-8-17</div>
</div>
</div>
</a>
What I am trying:
var link = document.createElement('a');
document.getElementsByTagName("a")[0].setAttribute("class", "scoreboard-video-outer-link");
document.getElementsByTagName("a")[0].setAttribute("url", "google.com");
mainWrapper.appendChild(link);
var videoWrapper= document.createElement('div');
document.getElementsByTagName("div")[0].setAttribute("class", "scoreboard-video-outer-link");
link.appendChild(videoWrapper);
var videoThumbnailWrapper = document.createElement('div');
document.getElementsByTagName("div")[0].setAttribute("class", "scoreboard-video--thumbnail");
videoWrapper.appendChild(videoThumbnailWrapper);
var videoImage = document.createElement('img');
document.getElementsByTagName("img")[0].setAttribute("src", "url-of-image-from-api");
videoThumbnailWrapper.appendChild(videoImage);
Then I basically repeat that process for all nested HTML elements.
Create A-tag
Create class and href attributes for A-tag
Append class name and url to attributes
Append A-tag to main wrapper
Create DIV
Create class attributes for DIV
Append DIV to newly appended A-tag
I'd greatly appreciate it if you could enlighten me on the best way to do what I'm trying to explain here? Seems like it would get very messy.
Here's my answer. It's notated. In order to see the effects in the snippet you'll have to go into your developers console to either inspect the wrapper element or look at your developers console log.
We basically create some helper methods to easily create elements and append them to the DOM - it's really not as hard as it seems. This should also leave you in an easy place to append JSON retrieved Objects as properties to your elements!
Here's a Basic Version to give you the gist of what's happening and how to use it
//create element function
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//append child function
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//example:
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");
//create link and div
let link = create("a", { href:"google.com" });
let div = create("div", { id: "myDiv" });
//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));
//create element function
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//append child function
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//example:
//get wrapper div
let mainWrapper = document.getElementById("mainWrapper");
//create link and div
let link = create("a", { href:"google.com", textContent: "this text is a Link in the div" });
let div = create("div", { id: "myDiv", textContent: "this text is in the div! " });
//add link as a child to div, add the result to mainWrapper
ac(mainWrapper, ac(div, link));
div {
border: 3px solid black;
padding: 5px;
}
<div id="mainWrapper"></div>
Here is how to do specifically what you asked with more thoroughly notated code.
//get main wrapper
let mainWrapper = document.getElementById("mainWrapper");
//make a function to easily create elements
//function takes a tagName and an optional object for property values
//using Object.assign we can make tailored elements quickly.
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
//document.appendChild is great except
//it doesn't offer easy stackability
//The reason for this is that it always returns the appended child element
//we create a function that appends from Parent to Child
//and returns the compiled element(The Parent).
//Since we are ALWAYS returning the parent(regardles of if the child is specified)
//we can recursively call this function to great effect
//(you'll see this further down)
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
//these are the elements you wanted to append
//notice how easy it is to make them!
//FYI when adding classes directly to an HTMLElement
//the property to assign a value to is className -- NOT class
//this is a common mistake, so no big deal!
var link = create("a", {
className: "scoreboard-video-outer-link",
url: "google.com"
});
var videoWrapper = create("div", {
className: "scoreboard-video-outer-link"
});
var videoThumbnailWrapper = create("div", {
className: "scoreboard-video--thumbnail"
});
var videoImage = create("img", {
src: "url-of-image-from-api"
});
//here's where the recursion comes in:
ac(mainWrapper, ac(link, ac(videoWrapper, ac(videoThumbnailWrapper, videoImage))));
//keep in mind that it might be easiest to read the ac functions backwards
//the logic is this:
//Append videoImage to videoThumbnailWrapper
//Append (videoImage+videoThumbnailWrapper) to videoWrapper
//Append (videoWrapper+videoImage+videoThumbnailWrapper) to link
//Append (link+videoWrapper+videoImage+videoThumbnailWrapper) to mainWrapper
let mainWrapper = document.getElementById('mainWrapper');
function create(tagName, props) {
return Object.assign(document.createElement(tagName), (props || {}));
}
function ac(p, c) {
if (c) p.appendChild(c);
return p;
}
var link = create("a", {
className: "scoreboard-video-outer-link",
url: "google.com"
});
var videoWrapper = create("div", {
className: "scoreboard-video-outer-link"
});
var videoThumbnailWrapper = create("div", {
className: "scoreboard-video--thumbnail"
});
var videoImage = create("img", {
src: "url-of-image-from-api"
});
ac(mainWrapper, ac(link, ac(videoWrapper, ac(videoThumbnailWrapper, videoImage))));
//pretty fancy.
//This is just to show the output in the log,
//feel free to just open up the developer console and look at the mainWrapper element.
console.dir(mainWrapper);
<div id="mainWrapper"></div>
Short version
Markup.js's loops.
Long version
You will find many solutions that work for this problem. But that may not be the point. The point is: is it right? And you may using the wrong tool for the problem.
I've worked with code that did similar things. I did not write it, but I had to work with it. You'll find that code like that quickly becomes very difficult to manage. You may think: "Oh, but I know what it's supposed to do. Once it's done, I won't change it."
Code falls into two categories:
Code you stop using and you therefore don't need to change.
Code you keep using and therefore that you will need to change.
So, "does it work?" is not the right question. There are many questions, but some of them are: "Will I be able to maintain this? Is it easy to read? If I change one part, does it only change the part I need to change or does it also change something else I don't mean to change?"
What I'm getting at here is that you should use a templating library. There are many for JavaScript.
In general, you should use a whole JavaScript application framework. There are three main ones nowadays:
ReactJS
Vue.js
Angular 2
For the sake of honesty, note I don't follow my own advice and still use Angular. (The original, not Angular 2.) But this is a steep learning curve. There are a lot of libraries that also include templating abilities.
But you've obviously got a whole project already set up and you want to just plug in a template into existing JavaScript code. You probably want a template language that does its thing and stays out of the way. When I started, I wanted that too. I used Markup.js . It's small, it's simple and it does what you want in this post.
https://github.com/adammark/Markup.js/
It's a first step. I think its loops feature are what you need. Start with that and work your way to a full framework in time.
Take a look at this - [underscore._template]
It is very tiny, and useful in this situation.
(https://www.npmjs.com/package/underscore.template).
const targetElement = document.querySelector('#target')
// Define your template
const template = UnderscoreTemplate(
'<a class="<%- link.className %>" href="<%- link.url %>">\
<div class="<%- wrapper.className %>">\
<div class="<%- thumbnail.className %>">\
<img src="<%- thumbnail.image %>">\
</div>\
<div class="<%- info.className %>">\
<div class="<%- info.title.className %>"><%- info.title.text %></div>\
</div>\
</div>\
</a>');
// Define values for template
const obj = {
link: {
className: 'scoreboard-video-outer-link',
url: '#someurl'
},
wrapper: {
className: 'scoreboard-video--wrapper'
},
thumbnail: {
className: 'scoreboard-video--thumbnail',
image: 'http://via.placeholder.com/350x150'
},
info: {
className: 'scoreboard-video--info',
title: {
className: 'scoreboard-video--title',
text: 'Pelicans # Bulls Postgame: E`Twaun Moore 10-8-17'
}
}
};
// Build template, and set innerHTML to output element.
targetElement.innerHTML = template(obj)
// And of course you can go into forEach loop here like
const arr = [obj, obj, obj]; // Create array from our object
arr.forEach(item => targetElement.innerHTML += template(item))
<script src="https://unpkg.com/underscore.template#0.1.7/dist/underscore.template.js"></script>
<div id="target">qq</div>
I am making a cart application in Angular using Angular Bootstrap.
When hovering over the cart icon a tooltip should appear. The tooltip's content should change based on if the item is already in the cart or not.
So, here is the html:
<h3><i class="fa fa-shopping-basket" ng-click="add2Cart(item.Name)" tooltip-placement="right" uib-tooltip-html="itemtooltiptext(item.Name)" aria-hidden="true"></i></h3>
Basically, in order to check if the item is already in the cart, I want the tooltip text to resolve from a function. My understanding from the documentation is this is supported as long as the HTML is trusted.
It says,
uib-tooltip-html $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-tooltip-template attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
So my itemtooltiptext() function is...
$scope.itemtooltiptext = function(name) {
if (localStorage.getItem("cart") === null) {
return $sce.trustAsHtml("Add " + name + " to Cart!");
} else {
var cart = JSON.parse(localStorage.getItem("cart"));
for (var i = 0; i < cart.length; i++) {
if (cart[i] == name) {
console.log("already in cart");
return $sce.trustAsHtml(name + "already in Cart!");
}
}
return $sce.trustAsHtml("Add " + name + " to Cart!");
}
}
This results in an
Infinite $digest Loop Error
As detailed here: https://stackoverflow.com/a/19370032
But the problem is I need it to come from a function with the various conditions? So should I be using a template? I don't understand how that would work any better because I still need dynamic text served from the template... so what is the solution?
Thank you.
This is not how you use uib-tooltip-html, apparently it causes an infinite digest loop, fortunately the demo plunk shows you how to do it.
You need to get/calculate your html, bind to some scope variable and bind it into uib-tooltip-html
js
$scope.itemtooltiptext = function() {
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
};
$scope.itemtooltiptext();
html
<button uib-tooltip-html="htmlTooltip" class="btn btn-default">Tooltip</button>
If you still want to bind a function to your tooltip, you can do like so
<button uib-tooltip="{{itemtooltiptext()}}" class="btn btn-default">Tooltip</button>
Note that this approache will have the function invoked every digest cycle.
I ran into this infinite digest cycle issue where I needed a dynamic tooltip... it caused angular to recalculate it every time as a new value (even though it was the same). I created a function to cache the computed value like so:
$ctrl.myObj = {
Title: 'my title',
A: 'first part of dynamic toolip',
B: 'second part of dynamic tooltip',
C: 'some other value',
getTooltip: function () {
// cache the tooltip
var obj = this;
var tooltip = '<strong>A: </strong>' + obj.A + '<br><strong>B: </strong>' + obj.B;
var $tooltip = {
raw: tooltip,
trusted: $sce.trustAsHtml(tooltip)
};
if (!obj.$tooltip) obj.$tooltip = $tooltip;
else if (obj.$tooltip.raw !== tooltip) obj.$tooltip = $tooltip;
return obj.$tooltip;
}
};
Then in the html, I accessed it like this:
<input type="text" ng-model="$ctrl.myObj.C"
uib-tooltip-html="$ctrl.myObj.getTooltip().trusted">
I am creating my first jQuery plugin that I would like to use for my projects.
However, the knowledge I have is not enough probably. Still, I wanna continue creating it...
So I have this part in my little plugin:
jQuery Plugin - Default Settings:
;(function($) {
var defaults = {
title : 'miniBox - Title Spot!',
description : 'miniBox Description Spot. Write a short article or leave it blank!',
buttons: {
switcher : true,
nameButton_1 : 'Continue',
nameButton_2 : 'Discard',
}
};
Now below we have this part:
$.fn.miniBox = function(customs) {
var config = $.extend({}, defaults, customs);
var $first = this.first();
$first.init = function() {
$('body').append( // -->
'<div class="miniBox-wrap">'
+ '<div class="miniBox-frame">'
+ '<div class="miniBox-title"></div>'
+ '<div class="miniBox-content">'
+ '<div class="miniBox-description"></div>'
+ '<div class="miniBox-buttons"></div>'
+ '<div class="miniBox-counter"></div>'
+ '</div>'
+ '</div>'
+ '<div class="miniBox-overlay"></div>'
+ '</div>' // <--
);
var mB_buttonOne = config.buttons.nameButton_1,
mB_buttonTwo = config.buttons.nameButton_2,
mB_title = config.title,
mB_description = config.description;
// --> Confirmation Buttons - Settings OPEN //
if(config.buttons.switcher === true) {
$('.miniBox-buttons').append( // -->
'<input type="button" id="agree" value=' + mB_buttonOne + '>'
+ '<input type="button" id="disagree" value=' + mB_buttonTwo + '>'
// <--
);
} else {
$('.miniBox-buttons').remove();
}
// <-- Confirmation Buttons - Settings CLOSE //
};
$first.init();
};
})(jQuery);
It is confusing a little bit to me, for the first time I guess...
QUESTION:
The title leads to settings fail so here's another question.
My settings appears to be working if I set default title and description and then create custom title or/and description ... It works, it will override defaults.
However as you can read that short if statement for buttons... It still works and overrides default settings if my buttons switcher is set to false or true in defaults or customs... However if defaults and customs both say: true or false... buttons value becomes "undefined".
I have no clues how to say always read custom settings only, if they are defined and forget about defaults... Or something like that. I hope you guys understand me and hopefully I'll find an answer.
Regards, Nenad.
EDIT:
Appears like I need to define completely a button config into customs in order not to get "undefined"... How can I fix this?
Example of Defaults:
var defaults = {
buttons: {
switcher : false,
nameButton_1 : 'Continue',
nameButton_2 : 'Discard',
}
};
Example of Customs:
$(function() {
$().miniBox({
title: 'Works flawlessly!',
buttons: {
switcher: true
}
});
});
How can I still use defaults buttons settings for button names if they are not defined into custom settings ?
.first is just a jQuery method. It selects the first element from the collection.
The init method is a defined function, which is then called immediately (a bit pointless in this case) although you could call it later on outside of the plugin code (also pointless).
As for the second part of your question, you were not recursively .extending the objects, so the nested object values weren't getting extended. Use true as the first argument to .extend to make it deep: http://jsfiddle.net/ntdLu/1/
I'm using the jQuery DataTables plugin, and having a slight problem with the filtering feature in it. If I have a table cell with content like <a href='foo6'>Blah</a>, and I filter for "6", that cell will show up, even though there is no "6" in "Blah". What I'd like to do is have the DataTables plug-in ignore HTML when doing it's filtering.
I've tried scouring the DataTables site, and found conflicting, un-helpful leads. One post suggested that I needed an sType:'html' option in the definition of my aaColumns, but I tried that and it didn't help ... plus a later post suggested that the current version of DataTables auto-detects the HTML sType. I also found this code snippet:
// Make filtering ignore HTML (see http://datatables.net/plug-ins/filtering)
$.fn.dataTableExt.ofnSearch['html'] = function ( sData ) {
var n = document.createElement('div');
n.innerHTML = sData;
if (n.textContent) {
return n.textContent.replace(/\n/g," ");
} else {
return n.innerText.replace(/\n/g," ");
}
};
which was supposed to fix things ... but it didn't.
So, my question is: does anyone out there know how to make DataTables ignore non-text (ie. HTML) content when filtering rows?
It turned out I needed a custom mRender function on my column headers. More importantly (since I had tried this at first without checking the "type" argument) you need to use the type argument provided to that function to make it only apply when filtering.
My end result looked something like this:
aaHeaders: [{
mRender: function(data, type, full) {
// If we're filtering, don't look at the HTML; only filter on the text
return type == 'filter' ? $(data).text() : data
}
}], //...
You can try this one :
$.fn.dataTableExt.ofnSearch['html'] = function ( sData ) {
return $("<div/>").html(sData).text();
}
Just upgrade your datatable.js.. I have used 1.9.4 and got the same problem after upgrading to 1.10.9 the problem resolved..
// To override basic search functionality of datatable
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var tableId = settings['sTableId'];
var searchTerm = settings.oPreviousSearch.sSearch;
if ( 'tableId' == tableId){
//I added tableId condition as I have multiple table on same page..
if(data[0].indexOf(searchTerm) > -1 ||data[2].indexOf(searchTerm) > -1||data[3].indexOf(searchTerm) > -1||data[4].indexOf(searchTerm) > -1||data[5].indexOf(searchTerm) > -1 || data[6].indexOf(searchTerm) > -1){
return true;
}else{
return false;
}
}
return true;
}
);
I'm working on a Sencha Touch application, and have a list of contacts. When a list item is tapped, an ActionSheet is displayed showing some basic functions (such as call, delete and ignore). Unfortunately, when the user taps and the ActionSheet is fired, the List item remains selected underneath the overlay (see the screenshot below):
Here's the function bound to the itemTap event:
itemTap: function(list, index)
{
// Deselect the selected record:
var currentRecord = list.getStore().getAt(index);
currentRecord.forename = currentRecord.get('forename');
currentRecord.surname = currentRecord.get('surname');
currentRecord.phoneNumber = currentRecord.get('phoneNumber');
currentRecord.shortFullName = currentRecord.forename + ' ' + currentRecord.surname[0];
list.getStore().deselect(index, true);
callButton.setText('Call ' + currentRecord.shortFullName + ' (' + currentRecord.phoneNumber + ')');
unfriendButton.setText('Remove ' + currentRecord.shortFullName + ' as friend');
friendActionSheet.show();
}
Unfortunately, list.getStore().deselect(index, true) returns the following error: Object [object Object] has no method 'deselect'
Any ideas on what I could be doing wrong, or how I can achieve this?
This works for me:
listeners: {
itemtap: function(dv, ix, item, e) {
// Clear the selection soon
setTimeout(function(){dv.deselect(ix);},500);
}
}
In Sencha Touch 2, use disableSelection: true, while creating a list
Ext.define('App.view.NewsList',{
extend: 'Ext.List',
xtype: NEWS_LIST,
config: {
store: NEWS_FEED,
//deselectOnContainerClick: true,// not working in Sencha Touch 2
disableSelection: true, // since Sencha Touch 2
itemTpl: '{heading}'
}
});
If you want to clear the whole list:
var selModel = app.views.notesList.deselect(app.views.notesList.getSelectedRecords());
setTimeout is really not a good solution here. It should be like this:
listeners: {
itemtap: function(list, ix, item, e) {
// Clear the selection soon
list.deselect(list.getSelectedRecords());
}
}
I haven't tried to recreate your problem but you may want to try:
list.deselect(currentRecord, true);
After you do that you may have to call
doLayout()
or
doComponentLayout()
to refresh the view.
This drove me INSANE.
While the approved answer will work, its worth noting that you can do it with a delay(like nested list does too) like this:
var selModel = app.views.VideosList.items.items[0].getSelectionModel();
Ext.defer(selModel.deselectAll, 200, selModel);
I put that in my controller (so its called when the view changes), where app.views.VideosList is my main panel and app.views.VideosList.items.items[0] is the list in that panel.
this did it for me (sencha touch 2.3):
list = Ext.Viewport.down('nestedlist');
list.getActiveItem().deselectAll();