How can I remove a backbone view from my router? I'm trying to run a check that says, if a certain view exists remove it. I just can't figure out the syntax to make this happen.
I have tried:
if(typeof mysite.city != "undefined")
{
console.log(mysite.city.View.prototype.__proto__.remove);
//Calling this remove function throws the error
mysite.city.View.prototype.__proto__.remove();
}
but I get some uncaught exception error that I can't fully read since a page reload is forced. My console.log outputs: function (){this.$el.remove();return this} I just don't know how to get that to execute.
Why don't you directly call mysite.city.remove()? I suppose you cannot do that for some strange reason (such as: you did override the remove function and lost the original functionality; if that's the case, why did you override the method, if you now need to call it?). If you must call the original remove method from Backbone's View, you could try this:
View.prototype.remove.call(mysite.city);
That will set the context of the remove function to the object mysite.city. Otherwise, when executing the remove function the way you called it, this will be undefined.
Related
I'm using angularJS and migrating to ui-router v1. I'm trying to get deep state redirects working like they used to in the previous version of ui-router.
I've successfully implemented the DSRPlugin in my config modules, and deep state redirects are firing and work as expected. However, I'm unable to reset the deep state. I need to be able to reset the deep state on a button click, which means logic within my component. Previously I could inject $deepStateRedirect into my controllers and simply call $deepStateRedirect.reset({}), but I'm no longer able to inject $deepStateRedirect. How can I access the reset method in ui-router v 1?
I have also noticed that when using DSR as a config object you can specify a function to determine if the redirect occurs. I could alternatively use this to determine whether to do the redirect or not, but the documentation is lacking. It shows that I should return a truthy value to do the redirect or a falsey value to prevent the redirect. In testing, returning true or false only causes a transition error: "i.state is not a function".
I'm not using a build process, just plain script includes.
Anyone have any ideas on how to make this work through either of the above methods?
This may not be the best practice way of doing the reset, but I found a solution after logging out various ui-router objects.
Inside of your controller you must inject the $uiRouter object. Then, you can set a variable to $uiRouter._plugins["deep-state-redirect"]. The reset() and other methods are available on the plugin's prototype.
You can then use that object and call those methods similar to how it worked in the previous version when injecting $deepStateRedirect.
var $deepStateRedirect = $uiRouter._plugins["deep-state-redirect"];
$deepStateRedirect.reset({});
I found this only in the source code and then in the documentation: https://ui-router.github.io/ng1/docs/latest/classes/core.uirouter.html#getplugin
The more correct way is to use UIRouter#getPlugin(pluginName), that is
var $deepStateRedirect = $uiRouter.getPlugin('deep-state-redirect');
$deepStateRedirect.reset(...);
I try get access to method of child component.
It look like that:
1.Called method by ref name of component and then method
Form.js
this.ref.details.getDataFromComponent();
<Details
pointToShow={this.state.point}
ref="details"
/>
Details.js
getDataFromComponent() {
//do my stuff get state and connect to get data for component Details
}
All the time I have "Uncaught TypeError: Cannot read property 'ref' of null"
React 15.4.2
To access refs of a component, you need to use this.refs, not this.ref.
However, this does not seem to be the issue here, as the error clearly says that this is null when you are trying to access it. To determine why this is we need to see more of your code.
You should also look into defining refs using the ref callback attribute instead of the way you are doing it, as this syntax is no longer recommended and may be removed in future releases.
As Timo has mentioned to access an element using refs you should you should write this.refs...
According to the error you don't have access to this. Most probably you are calling this.ref.details.getDataFromComponent(); inside a method without access to this
For example you write :
callRef() {
this.ref.details.getDataFromComponent();
....
}
If so then you don't have an access to this there. You should bind your function with this.
You can either use arrow function to auto bind with this :
callRef = () => {
this.ref.details.getDataFromComponent();
....
}
Note: to use arrow function you need to use babel loader in your webpack configuration.
Or you can bind when calling the method.
For example you should call callRef() method inside jsx codes like this:
< ... onClick={this.callRef.bind(this)} />
I have some object in my Component:
this.user = Authentication.user;
Which works just fine - it copies the reference, and if Authentication.user changes, this.user in my Component changes as well.
However, I am wondering, if it is possible to do the following:
this.user = Authentication.getUser()
where Authentication.getUser :
getUser(){
return this.user;
}
However, this does not seem to copy reference to user from Authentication.
Am I doing something wrong here, or it not possible?
UPDATE
Actually, it works pretty nice:
http://plnkr.co/edit/ULuSl6CIBCzi7gcsLu3R?p=preview
There is no way to fix this for primitives.
TypeScript transpiles to JavaScript and you can't change how JavaScript handles primitive types.
If you want to synchronize, create an Observable that sends value changes, then the receiver can subscribe and gets notified about changes and update his copy of the value.
I'm running into a weird case that only seems to happen upon first loading a component on a heavily based component page (loading 30+ components).
#Component{
selector: <parent-component>
template: `<child-component [myObject]=myObject>
}
export class ParentComponent {
private myObject:DTOValue;
constructor(service:MyService){
service.getDTOValue().subscribe((dtoValue:DTOValue) => {
this.myObject = dtoValue;
});
}
}
#Component{
selector: <child-component>
template: `<div></div>
}
export class ChildComponent {
#Input set myObject(value:DTOValue) => {//do something};
constructor(){
}
}
In this code, the Parent is going to get a value to a child as an input. This value comes from a request at a later time, so when the child is first initialized, the input could be undefined. When the value does get returned from the request and is set on the variable myObject, I'd expect that the child component would receive an input event being triggered. However, due to the timing, it seems like this is not always the case, especially when I first load a page that contains a lot of files being loaded.
In the case that the child component doesn't receive the input, if I click else where on my page, it seems to now trigger the change detection and will get the input value.
The 2 possible solutions I can think of that would require some large code changes so I want to make sure I choose the right now before implement them.
Change the input to be an Subject, so that I push the input value which should ensure that a correct event is triggered(this seems like overkill).
Use the dynamic loader to load the component when the request as return with the correct value (also seems like overkill).
UPDATE:
Adding a plnker: http://plnkr.co/edit/1bUelmPFjwPDjUBDC4vb, you can see in here that the title seems to never get its data bindings applied.
Any suggestions would be appreciated.
Thanks!
If you can identify where the problem is and appropriate lifecycle hook where you could solve it, you can let Angular know using ChangeDetectorRef.
constructor(private _ref: ChangeDetectorRef)
method_where_changes_are_overlooked() {
do_something();
// tell angular to force change detection
this._ref.markForCheck();
}
I had a similar issue, only with router - it needed to do redirect when/if API server goes offline. I solved it by marking routerOnActivate() for check...
When you trigger change detection this way a "branch" of a component tree is marked for change detection, from this component to the app root. You can watch this talk by Victor Savkin about this subject...
Apologize, the issue ended up being my interaction with jQuery. When I triggered an event for a component to be loaded, inside of the jQuery code, it wouldn't trigger the life cycle. The fix was after the code was loaded to then call for a change detection.
I'm using the angular-ui-router-extras module and more specifically the $previousState service, but I can't get it to return to the previous state, it always returns null.
This is all my code (the module is properly injected)
//When I enter the route I memorize the previous state
$previousState.memo('caller');
//more code
self.goBack = function () {
$previousState.go('caller');
};
I inspected the $previousState object and it seems to have the proper methods and the error I get when I try to use $previousState.go() makes sense as I can't go to a null state.
What am I missing so that it should work ?
I'll close this as the null was valid, the issue arose because my users were deep-lining to the page and thus they had no previous state to memorise, if they go through the proper flow the $previousState has value.