I have this repeater,
<Repeater.itemTemplate>
<StackLayout tap="tapEvent" index='im-an-index'>
<Image src="{{src}}" stretch="aspectFill" />
</StackLayout>
</Repeater.itemTemplate>
I want to get the index on my tap event. My JS looks like this,
function tapEvent(args) {
var target = args.object;
var index = target.index;
console.log(index);
}
exports.tapEvent = tapEvent;
On console.log, I only get {} .. How can I get the index attr of the tapped stacklayout? Thanks.
We can get the $value from repeater, but is there some $index?
I think that there was a bug and in some cases a wrong object is passed to args.object. You can try to get the stack with args.view.
Related
In NativeScript-Vue, what's the simple, clean way to pass data to a modal?
Background:
I need to display external web pages in a modal. WebView seems the thing. Except that the docs indicate that you must hard code the source:
<WebView src="http://nativescript-vue.org/" />
That's no good. I need something like
<WebView :src="myUrl" />
data() {
return {
myUrl: "https://en.wikipedia.org/wiki/Mary,_Queen_of_Scots",
}
Despite what the documentation says, this seems to work. Yay!!
Now, in the modal, how do I set myUrl to a value from the original app page?
From you original page:
this.$showModal(YourWebModal, {
props: {
myUrl: 'https://en.wikipedia.org/wiki/Mary,_Queen_of_Scots'
}
})
In your modal:
<WebView :src="myUrl" />
props: ['myUrl'],
data () {
return {}
}
I'm writing a mobile app with famous/angular. A swipe to the right in any view reveals the menu. For this I have set up the following event handling:
var MouseSync = $famous["famous/inputs/MouseSync"];
var TouchSync = $famous["famous/inputs/TouchSync"];
var GenericSync = $famous['famous/inputs/GenericSync'];
$scope.sync = new GenericSync(
["mouse", "touch"],
{direction: GenericSync.DIRECTION_X}
);
$scope.sync.on('update', function(data){
// do stuff while swiping
});
$scope.sync.on('end', function(data) {
// do stuff at swipe end
});
The above is all working fine. My problem now is that I have html inputs in some of the views which I cannot access/enter due to the above. The surfaces in which these are contained pipe their events to 'sync':
<fa-surface fa-pipe-to="sync">
<input type="text"></input>
</fa-surface>
I know that the issue here is that the click-event on my input is passed on to sync. I just don't know what to do about it. Any ideas?
Many thanks!
Did you try the HTML5 autofocus attribute <input type="text" autofocus></input> or setting the focus on click? <input type="text" ng-click="focus($event)"></input>
For the second option, you will need to set up a function on the scope as follows:
$scope.focus = function(ev){
ev.target.focus()
}
I have the following view to display a checked mark whenever the active property is set:
App.ActiveEntryView = Ember.View.extend({
render: function(buffer) {
var active = this.get('active'), icon;
if (active) {
icon = 'fa fa-check';
} else {
icon = '';
}
return buffer.push(icon);
}
});
But this is not re-rendering if I the active property changes. This is bound in my template like this:
{{#each model}}
<tr class="odd-even">
....
<td>{{view App.ActiveEntryView activeBinding="parked"}}</td>
....
</tr>
{{/each}}
Where parked is the property of the model that I want to evaluate. But whenever that property changes in the model, the view is not re-rendered. I have tried adding an observer:
App.ActiveEntryView = Ember.View.extend({
render: function(buffer) {
var active = this.get('active'), icon;
if (active) {
icon = 'fa fa-check';
} else {
icon = '';
}
return buffer.push(icon);
}.observes('active')
});
But then I get an error:
Uncaught TypeError: undefined is not a function
Referring to the line:
return buffer.push(icon);
I guess that the observer triggers the render function passing a different parameter than buffer.
How can I re-render the view then?
I don't know a ton about views, but from what I understand, this isn't the way to go about re-rendering. Specifically, render is a hook called by the system when it needs to render the template. Calling the hook yourself won't force the system to re-render the template, that has to be done at a higher level.
That being said, there's probably a way to force a re-render of the whole view, but that doesn't seem like a good solution for most issues. I see that you're doing something with icons, so I'm going to take a wild stab at a solution without knowing your entire problem. If you post more details, I can probably help you more.
From what I can tell, it seems like you're trying to change the icon of an element in the view when the active property changes. Here's how you might do that:
In your view template:
<i {{bind-attr class='view.active:fa view.active:fa-check'}}></i>
You can see more details about binding class names here.
I am trying to build a reusable popup view with it's own template and CSS. In this reusable view, I want to be able to display child views with the content that the parent view wants to put in the popup.
The handlebars template for the popup looks like this:
<div class='popup'>
<a class='open' href='#' {{action toggleVisible}}>
{{view button}}
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
{{view content}}
</div>
</div>
</div>
In this context, button and content should be Ember views that get rendered inside this popup and those views will be different depending on what parent view is creating and displaying the popup.
The popup View object looks like this:
var popup = Ember.View.extend({
button: null,
content: null,
templateName: 'popbox',
visible: false,
toggleVisible: function() {
var visible = this.get('visible');
this.set('visible', !visible);
if (visible) {
this.$().find('.box').fadeOut(250);
} else {
var pop = this.$().find('.popbox');
var box = this.$().find('.box');
box.css({
'display': 'block',
'top': 10,
'left': ((pop.parent().width()/2) -box.width()/2 )
});
}
}
}
}));
I'm not sure how to pass the templates to be rendered in the popup from the parent view. Right now I'm trying to do something like this, but it doesn't work.
var sendto = Ember.View.extend({
templateName: 'sendto',
popupView: popup.extend({
button: Ember.View.extend({
template: Ember.Handlebars.compile('{{model.selectedRecipients.length}} {{model.peopleOrPersonText}}')}),
content: Ember.View.extend({template: Ember.Handlebars.compile('Test content')})
})
}));
What would be the correct way to pass views to the popup view?
NOTE: This appears to work but it generates a DEPRECATED error message:
Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.
UPDATE: It turns out my issue was due to something else entirely (was accidently including Ember.js twice). The code above actually seems to work just fine.
Use a Ember.ContainerView, and have the internal views each be their own view class with their own template. Then, you can just set the childViews array on the containing view to contain an instance of whatever view you want to display.
I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.