Issues with using this.transitionTo in Ember.js

Exploring the integration of Ember.js with Phonegap, I have implemented the Confirm API. However, I am encountering an issue where executing this.transitionTo('index') from the event-driven function onConfirm is proving to be a challenge.

Any thoughts or suggestions on how to resolve this dilemma?


App.MainRoute = Ember.Route.extend({
    actions:{
        abort: function(){
            navigator.notification.confirm(
                'Are you sure?', 
                 onConfirm,            
                'Abort',          
                ['NO','YES']     
            );
            function onConfirm(buttonIndex) {
                if (buttonIndex == 2){
                    this.transitionTo('index');
                }                
            }

           //this.transitionTo('index');
        }
    }
})

Answer №1

When it comes to variable scope, it's important to ensure that `this` is scoped correctly within your code. In the example below, `this` should be scoped to the outer context rather than just the `onConfirm` function:

function onConfirm(buttonIndex) {
  if (buttonIndex == 2){
    this.transitionTo('index');
  }                
}.bind(this) // <-- make sure "this" is properly scoped for transition

If you require support for legacy browsers, you can achieve the same result using the following approach:

var _self = this;
function onConfirm(buttonIndex) {
  if (buttonIndex == 2){
    _self.transitionTo('index');
  }                
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an issue with the message: "Property 'ref' is not available on the type 'IntrinsicAttributes'."

Having trouble implementing a link in React and TypeScript that scrolls to the correct component after clicking? I'm using the useRef Hook, but encountering an error: Type '{ ref: MutableRefObject<HTMLDivElement | null>; }' is not assi ...

Struggling to implement a sidebar in HTML using jQuery and running into issues?

I am struggling to create a template that includes a navbar, sidebar, and other elements that can be used across multiple HTML files. Despite trying different approaches, including changing the jQuery version and downloading jQuery, I am unable to make it ...

Uploading files and data in Laravel using Vue.js and Vuetify: A step-by-step guide

My Vuetify form is working fine with text input, but when I try to include images, I encounter the error GET http://danza.test/thumbnails[object%20File] 404 (Not Found). How can I successfully pass both text and images in a form? This is part of the code ...

Enlarging and cutting video footage

I have developed an app that features a code enabling users to capture photos using their computer-connected camera. How it Works: A webcam is utilized to display a video element with the camera as its source: function onSuccess (stream) { this.video.s ...

Guide on changing label background color in React

Would you be able to guide me on how to change the background color of the label in react? I am utilizing react + material ui from this source. You can find information on writing CSS in js at this page. Some plugins like jss-nested are available for this ...

Is it possible to run both the frontend and backend on the same port when using vanilla JavaScript for the frontend and Node.js for the backend?

Is it possible to run frontend and backend on the same port in Rest APIs if using vanilla JS for the frontend and Node.js for the backend? I've come across information on how to do this with React, but nothing specific to vanilla JS. Any insights on t ...

Unusual occurrence in Chrome when checking definitions: ReferenceError: x is not defined

Recently, I've come across some odd behavior in Chrome following its latest update. Whenever I try to determine if a variable is defined, it ends up triggering an uncaught error like the one shown below: if(x) { alert('x is defined.'); } T ...

Having trouble creating an alias system in discord.js and encountering errors

While developing an alias system for my Discord bot, I encountered a situation where I wanted to display the message: "if the user entered the wrong command name or alias then return: invalid command/alias". However, when implementing this logic, ...

Issue with running "ng serve" command on command prompt

Upon running the command "ng serve" in cmd for Angular2, I encountered the following errors: "unknown browser query basedir=$(dirname $(echo $0 | sed -e s,\,/,g))" After multiple attempts to resolve the issue, I found the error message: Browsersl ...

Stylus mistakenly fetches styl files from an incorrect directory

My issue involves a file named mobile.styl, which gathers all necessary styl files using the @import function: @import '../../common/styles/colors' @import '../../common/styles/init' @import 'landing' @import 'faq&apos ...

How to prevent table row from highlighting on hover in Angular Bootstrap

In my project, I have a table that showcases various details and allows users to select certain rows. Some of these rows have child rows which can also be selected. The requirement is for the parent rows to be selectable only if they do not have any child ...

Can we specify ng-include, ng-init, and ng-controller within the controller definition?

<div class="row caption-view" ng-include="'app/views/inventory/grid-view/part.html'" module="subscriber" alias="il" ng-controller="GridController as il" ng-init="il.setGridParams(cse.gridParams.findCation); cse.find ...

Suggestions for the AJAH Library

Currently, my application is built on classic ASP. I am interested in incorporating AJAX-style partial page updates to improve the user experience and avoid unnecessary server roundtrips. My goal is to have a list of rows displayed with the option to add ...

Creating a tree array in JavaScript from JSON data

I have been struggling to create a tree array from the given JSON data. I have attempted to use filter, map, and reduce methods, but haven't been successful in achieving the desired result. [{ "code": "2", "name": "PENDING" },{ "code": "2.2", ...

NG-show does not function properly with Angular validation messages when there are two input fields present

I have created a form with two modes: 'Create' and 'Edit'. Depending on the mode selected, specific div content is displayed in different areas of the layout. The content of the div includes an input field and validation messages relate ...

Creating an Array using the values of a JSON object in jQuery

There is a basic JSON file (test.json): {"personnes":[ { "name":"Super", "firstname":"Mario", "adresse":["45 rue du poirier","6700","Strasbourg"], "departement": "bas-rhin", ...

What is the best way to include an ID parameter in a $ajax GET request?

Real-life Dilemma I've been grappling with an issue for the past 4 hours - I'm attempting to send an http get request with the user ID as a parameter. Despite trying numerous examples found online, I continue to encounter this pesky error on the ...

Interacting with a button using Python Selenium while validating onFocus with JavaScript

I'm currently working on automating webpage navigation with Selenium in Python. My goal is to click on an HTML button that triggers JavaScript code to validate if the button is focused during the onclick action. Although I can successfully select a v ...

How can I convert Double Quotes from (") to (&quot;) in TinyMce Editor?

While using TinyMce Editor, I have encountered a problem with double quotes breaking my code. In the HTML source of TinyMce, it displays " instead of &quot, causing issues in conversion. It seems that it is not converting " to " as it should, simi ...

Is Joomla equipped with shortcodes akin to those found in Wordpress?

One of the great features of WordPress is the ability to use shortcodes to insert information into HTML without the need for programming knowledge in PHP or JavaScript. This simplifies tasks and increases safety. For example (this is just a hypothetical s ...