I have 2 questions. First, is this possible to use List item in sencha touch without template? I mean, can i access the list item seperately?
The second one is related with the first one. I need to send my store item in template as a function parametere how can i do this? I tried below but does not work.
template = new Ext.XTemplate(
'<div style="width:100%;height:40px;">',
'<span>{c}</span><span style="font-size:10px" >{e}</span>',
'<span> ',
'<tpl for=".">',
'<span onload="formatNumber({i})">{i}</span>',
'</tpl></span>',
'</div>',
{
Thanks,
The list items' HTML is in the property all.elements. That will give you the HTML DOM node of each item in the list. The property isn't public so it may break in a future version.
I don't really understand what you are trying to do. You can render anything with a template.
Related
Summary
I want to continue to use nested routes but without displaying top level content when the nested route is accessed. I'm not sure this is possible ?
Detail
Initially my requirement was to to display a list of, eg, foods and offer the user the option to add a food item foods/add . Using the outlet tag at the top of the list template allowed a form to add a food item to become visible at the top of the list, transitioning back to food after the add resulted in the list being displayed without the form.
New Requirement
The requirement has now changed and it's necessary to show the form without the the contents of the list and after a succesful add show the list without any form.
Question
I know I could abandon the sub-routes approach and create a route such as food-add but is there any other way of preserving the sub-route (and the corresponding file structure, which I like) but allow the the template for foods/add to be rendered without the list content ?
Each route has an index template which is only visible when a child route is not present.
You could do something like this:
index.hbs
{{#each foods as |food|}}
{{food}}
{{/each}}
<LinkTo #route="food.add">Add</LinkTo>
food/add.hbs
<form>
...
</form>
{{!-- submitting this form would add the new food to the list of foods
and then also transition back to `food` --}}
Here is some more info on how the index route works
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes
I have a custom jquery plugin that use to create drop down html for a search box.
Inside that, html is created as follows.
$.each(stack, function (i, stackItem) {
var url = _getItemURL(stackItem, lang);
if (stackItem.INS !== undefined) {
html += '<li class="row"> ' + stackItem.DS_HIGHLIGHTED + ' - ' + stackItem.E + '<br>' + stackItem.TICKER_DESC + ' </li>';
} else {
html += '<li class="row"> ' + stackItem.COMPANY_DESC_HIGHLIGHTED + '<br>' /*+ _getCountry(stackItem.CC, lang)*/ + ' </li>';
}
itemCount++;
});
As you can see href attribute is used to create links in this html. But when user click on those links application reloads the browser page. I want it to correctly map to different route in the application like in hbs files as follows
<li> {{#link-to 'stock-overview' 'en' 'tdwl' '1010'}}Stock{{/link-to}} </li>
How can I generate html like that inside previous java script code.
Appreciate any help?
First, I would recommend you to think if you really need that jQuery plugin or could go with a plain ember solution. There are some pretty fancy addons like ember-power-select.
But if you really want to do that you need to understand that a {{#link-to}} does not only generate a <a> tag but only handles clicks on it and then doing a transitionTo.
So no, its not possible to do this when you simply append the HTML to the DOM. You would have to catch the click events on the <a> tags manually and then trigger the transition. It depends a bit how you inject the html into the DOM.
One thing you could do is to create a unique id for each <a> tag and after you inserted the html into the DOM you find the <a> tags by the id and attach the onclick event.
A better way would be to create DOM instead of HTML, so manually call document.createElement and then attach the click event.
To trigger the transition you can do something like this inside any Object that has the owner injected (like a component):
Ember.getOwner(this).lookup('controller:application').transitionToRoute('stock-overview', 'en', 'tdwl', '1010');
However cleanly the best solution would be to go for a ember handlebars template and a {{#each}} loop instead of the jQuery solution. To tell you how to do that however we need more information. So best is probably you ask a new question and explain exactly what you want to achieve, and now ask about a problem you have with a probably wrong solution for another problem.
I am trying to use ember to show a dynamic list of found content. The problem is that when I try to put handlebars in html attributes, everything breaks.
RegApp.PatronsFound = Ember.CollectionView.create
tagName: 'table'
content: []
itemViewClass: Ember.View.extend
template: Ember.Handlebars.compile("<td><button onclick='alert({{content.id}})'>{{content.name}}</button>")
RegApp.PatronsFound.appendTo('body')
When it is fed a piece of content with the ID of 3 and the name FOO, I want this html to be generated:
<button onclick="alert(3)">FOO</button>
Instead, I get this:
<button onclick="alert(<script id=" metamorph-4-start'="" type="text/x-placeholder">3<script id="metamorph-4-end" type="text/x-placeholder"></script>)'>FOO</button>
You can use
{{unbound content.id}}
to arbitrarily insert values into your templates. Normally, such values are wrapped in metamorph tags which allow the displayed value to be bound to the backing value, and updated whenever the backing value changes. This only works if the output is regular HTML, not, in this case, spanning event handlers and embedded JS. {{unbound}} inserts the value at that property path once, without metamorph tags, and without being updated if that value changes in the future.
I have a list component which is filled out using a data store(data loaded from server as json). A part of data from data store is displayed as list items, and i need some kind of a "+" button to the left of it to expand a list item(and "-" to collapse) to reveal(/hide) the remaining info. I could simply put some javascript to itemTpl tag but i've no idea how to make smooth transitions this way. Maybe am missing some standard settings for a list component, but i can't find any info. Any help appreciated.
There is no standard settings to do this functionality. But this is possible to achieve. You can have your item template as something like this:
itemTpl: '<div class="plus"></div><div class="title">{title}</div><div class="hidden">{mydetails}</div>'
Initially, the details is hidden. You need to handle the animation when your taps the list item. So, in your event you will have to do:
itemtap: function(view,index,htmlElement,e,opts) {
// change the div plus to minu..
// Get hold of the div with details class and animate
var el = htmlElement.select('div[class=hidden]');
el.toggleCls('hidden'); //remove the hidden class if available..
el.show(true); // show with animation
}
The object is obtained from select() method is Ext.dom.CompositeElementLite .. Refer this class for more methods. You can call the Ext.Anim from this object as well..
To animate you can use the Ext.Anim class. Once you have the html element of you 'details' div, you can:
Ext.Anim.run(detailsDiv,'slide',{
out:false,
from: 'hiddenCSS',
to: 'visibleCSS'
});
Refer to Anim class for more setting that might be needed to have your desired effect. Also note that you will have to track the previously clicked (expanded) list items.
Here is the scenario... I have a a checkbox next to each field that I am replacing on page load with jquery with "Delete" text that enables me to delete the field via jquery, which is working fine. Like so...
$(".profile-status-box").each(function(){ $(this).replaceWith('<span class="delete">' + 'Delete' + '</span>') });
The problem comes in however is that after page load, I am also giving the user the option to dynamically add new fields. The new added fields though have the checkbox and not the delete link because they are not being replaced by jquery since they are being added after the initial page load.
Is't possible to replace the content of new elements added to the page without doing a page refresh? If not, I can always have two templates with different markup depending one for js and one for non js, but I was trying to avoind taht.
Thanks in advance.
You can use the .livequery() plugin, like this:
$(".profile-status-box").livequery(function(){
$(this).replaceWith('<span class="delete">Delete</span>')
});
The anonymous function is run against every element found, and each new element matching the selector as they're added.
Have a look at this kool demo. It removes and adds elements like a charm.
http://www.dustindiaz.com/basement/addRemoveChild.html
Here's how:
First of all, the (x)html is real simple.
xHTML Snippet
<input type="hidden" value="0" id="theValue" />
<p>Add Some Elements</p>
<div id="myDiv"> </div>
The hidden input element simply gives you a chance to dynamically call a number you could start with. This, for instance could be set with PHP or ASP. The onclick event handler is used to call the function. Lastly, the div element is set and ready to receive some children appended unto itself (gosh that sounds wierd).
Mkay, so far so easy. Now the JS functions.
addElement JavaScript Function
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
ni.appendChild(newdiv);
}
And if you want to,
removeElement JavaScript Function
function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
and thats that. bobs your uncle.
This is taken from this article/tutorial: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
I've just learnt this myself. thank you for the question
Hope that helps.
PK