I am facing a strange issue with ui-router nested state.
I am using ionic tabs project.
I have the following states:
->home
->myplace
inside myplace I have a button-bar and a ion-nav-view
I am changing the ion-view-content based on button bar.
So myplace is an abstract state for me.
->myplace
-->enrolments
-->orders
-->payments
enrolments, order and payments are my child state of myplace.
problem:
In home state view I have a button, on click of it I am redirecting to enrollments state without any issue. And I am able to navigate to orders and payments also there.
But if I try to go to orders state, URL is changing but the template is not loading. Strange.
Enrollments and orders are same level child states. Able to go to enrollments. Template is loading as expected but for orders URL is changing but view is not rendering.
aAny help would be highly appreciated!!
I have tried adding debugging information for statechangeStart, success.
StateChangeStart, StateChangeSuccess both are getting called.
/enrollments:
$stateChangeStart to undefined- fired when the transition begins. toState,toParams :
Object {url: "/enrollments", parent: "footer.home", views: Object, name: "footer.myapp.enrollments", data: Object} Object {}
app.js:55 $stateChangeSuccess to footer.myplace.enrollments- fired once the state transition is complete.
/orders:
$stateChangeStart to undefined- fired when the transition begins. toState,toParams :
Object {url: "/orders", parent: "footer.home", views: Object, name: "footer.myapp.orders", data: Object} Object {}
app.js:55 $stateChangeSuccess to footer.myplace.orders- fired once the state transition is complete.
Related
In my Laravel 9 project, I have a parent component, whose template includes a child component.
template>
....
....
<div v-if=item.is_visible class="col-4">
<note-details-modal-component v-bind:is_visible=item.is_visible :note_id= item.id>
</note-details-modal-component>
</div>
On clicking a button in the parent component, I set is_visible to true that renders the child component through v-if. In the child component, when I press a button, it calls a method that emits an event to the parent.
closeNow: function() {
console.log('closeNow');
// this.$parent.$emit('close_note',false);
this.$emit('close_note',false);
} ,
In the parent component, I have a method.
close_note(value)
{
console.log('In parent');
this.is_visible = ! this.is_visible;
},
When I click the close button in the child component, it calls CloseNow() in the child component, and I see that in the console.log. However, that event does not emit to the parent. I have tried all suggestions that I could find on the web. Also, I do not see any errors in the Dev console.
Could someone please tell me what's wrong in my code that is preventing the event from emitting from the child component to parent?
Thanks in advance.
The thing is that nothing refer to the emit you made. If you have this:
closeNow: function() {
console.log('closeNow');
this.$emit('close_note',false);
}
You should mention the close_note when you call the child component. It should be something like that:
<note-details-modal-component v-bind:is_visible=item.is_visible :note_id= item.id #theEmitName="theFunctionYoucall">
</note-details-modal-component>
where theEmitName is close_note and the function you call has the same name. This medium can be usefull : https://medium.com/js-dojo/component-communication-in-vue-js-ca8b591d7efa
I wasn't sure of the best way to word the title, but hopefully the description will clarify.
I have an Angular2 component that uses Redux for state management.
That component uses *ngFor to render an array of small inputs with buttons like this. The "state" is something like this...
// glossing over how I'd get this from the Redux store,
// but assume we have an Immutable.js List of values, like this...
let items = Immutable.fromJS([{value: foo}, {value: bar}, /*...etc*/ })
And the template renders that like so...
<input *ngFor="let item of items, let i = index"
type="text"
value="item.get('value')"
(blur)="onBlur($event, i)">
<button (click)="onClick($event)">Add New Input</button>
When an input is focused and edited, then focus is moved away, the onBlur($event) callback is called, a redux action (ie: "UPDATE_VALUE") is dispatched with the new value.
onBlur($event, index) {
let newValue = $event.target.value;
this.ngRedux.dispatch({
type: "UPDATE_VALUE",
value: {index, newValue}
});
}
And the reducer updates the value (using Immutable.js):
case "UPDATE_VALUE": {
let index = getIndex(action.value.index); // <-- just a helper function to get the index of the current value.
return state.updateIn(["values", index], value => action.value.newValue);
}
The state is updated, so the component is re-rendered with the updated value.
When the button next to the input is clicked, the onClick($event) callback is fired which dispatches a different redux action (ie: "ADD_VALUE"), updates the state, and the component is re-rendered with a new blank input & button.
The problem comes up when the input is focused (editing) and the user clicks the button. The user intended to click the button, but because they happened to be focused on the field, it doesn't behave as expected. The (blur) event is fired first, so the input onBlur callback is fired, redux action dispatched, state updated, component re-rendered. BUT, the button (click) is lost, so the new input isn't created.
Question:
Is there a way to keep track of the click event and trigger the second action after the re-render? Or, is there a way to somehow chain the redux actions so they happen in sequence before the re-render?
Side-note - I've tried changing the (click) event to use (mousedown) which is triggered before the (blur) but that caused Angular (in devMode) to complain that the #inputs to the components were changed after being checked (the state changed during the change detection cycle). I didn't dig into that too deeply yet though. I'm hoping to find a solution using click and blur as is.
Thanks!
I am trying to trigger an event in the marionette itemview (List.SendQuestion), however, I was unable to register the trigger in the controller (as seen below)
Essentially, after clicking on the 'a.send', a trigger was supposed to happen and the 'send_qn_view' should capture the event and print out the message 'triggered'. But that was not happening.
Can someone advise me what might be going wrong here?
#Dailymuses.module "SidebarModule.List", (List, App, Backbone, Marionette, $, _) ->
List.Controller =
showSidebar: ->
send_qn_view = new List.SendQuestions
collection: Onethingaday.Public.friends
send_qn_view.on "itemview:ask:user", (itemview, question) ->
console.log('triggered') #THIS IS NOT EXECUTED
class List.SendQuestion extends Marionette.ItemView
template: "sidebar/list/templates/send_question"
className: 'qn_askee'
tagName: 'li'
events:
"click a.send" : "sendQuestion"
sendQuestion: (e) ->
e.preventDefault()
debugger #this debugger was triggered
#trigger "ask:user", #model
class List.SendQuestions extends Marionette.CompositeView
template: "sidebar/list/templates/send_questions"
itemView: List.SendQuestion
itemViewContainer: "ul.friends"
Edit: Corrected my answer and updated my fiddle
Sorry about that. Your syntax for event bubbling is correct.
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#childview-event-bubbling-from-child-views
"itemview:*" event bubbling from child views
When an item view within a collection view triggers an event, that
event will bubble up through the parent collection view with
"itemview:" prepended to the event name.
That is, if a child view triggers "do:something", the parent
collection view will then trigger "itemview:do:something".
Something to note. Marionette supports view triggers. If your callback is just triggering a view event you can remove the event hash and callback and shorten your code to this:
triggers: {
"click a.send": "ask:user"
}
http://lostechies.com/derickbailey/2012/05/15/workflow-in-backbone-apps-triggering-view-events-from-dom-events/
Fiddle:
http://jsfiddle.net/FRHkt/1/
For anyone new coming to this example, with Marionette 2.x, itemview:* for children views have been replaced with childview: triggers in the parent view, and the collection and composite views have also had their parameters changed from itemView and itemViewContainer to childView and childViewContainer
Im using backbone, require.js and coffeescript in a application. Programming my app, discovered i have a problem with the views. Sorry for my english ! =)
My dom is :
<div id="header"></div>
<div id="container"></div>
Part of my app :
class AppRouter extends Backbone.Router
routes:
'': 'home'
'u/:user': 'user'
'events: 'events'
'messages': 'messages'
events: () ->
events = new EventsView
events.events()
messages: () ->
messages = new MessagesView
messages.messages()
class MessagesView extends Backbone.View
template: window.Handlebars.compile MessagesTpl
el : '#container'
events :
'click #test' : 'test'
test: () ->
console.log 'test'
messages: () ->
#fecth and bind render method on 'all'
class EventsView extends Backbone.View
template: window.Handlebars.compile EventsTpl
el : '#container'
events: () ->
#fetch and bind render method on 'all'
I have the following problem :
When I instance and call in the router ("messages") the messagesView, i do a fetch and the render works fine. Then when the router navigate to the other route ("events") and call eventsView, same thing happens, it renders the view correctly.
But if navigate again on the route "messages" the event "test" is fired two times ! , once for each instance !
I discovered if i call on the router $("#container").unbind() previous instance MessagesView , this fix the problem, but i dont know if my solution its really good.
My fear is that the DOM is being created evil and have high load. You know you can do with this?
Very thanks for all ! grettings from Argentina !
Alejandro
Your solution is fine, you're just unbinding and rebinding the events, should not be a problem. Because you use the same dom element, you have to render the view again, but normally that is not too heavy. I've used the same solution.
Alternatively, you could have separate dom elements for MessagesView and EventsView, create the views the first time the user goes to the route. Then you always hide and show the dom elements depending on the current route.
I've been struggling through my first Backbone app and have started to get the hang of things. I now have a few successful reports that load JSON data from my server (NodeJS), populate a template (Handlebars), and render relatively nicely on the frontend.
The issue I'm running into is that I'm trying to add event handlers to a <select> object coming in from one of my templates and I'm not having much luck.
Here's the template:
// Report - New Clients
script(type='text/x-handlebars-template', id='newClients-template')
// Start Listing
{{#each report}}
.listingName
.youSearched
| Stylist:
.srchResult
select.chzn-select(id='stylists', style='width:350px')
option(value='null') All Stylists
{{#each stylists}}
option(value='{{uid}}') {{name}}
{{/each}}
.clear
And here's the Backbone View:
note: I'm calling the view from within a $ -> so it shouldn't be loading until DocumentReady
# View
class window.NewClientsView extends Backbone.View
events:
'click #stylists': 'selectStylist'
initialize: ->
#el = $('.containerOuter')
_.bindAll this, 'render'
#collection.bind 'reset', #render
# Compile Handlebars template at init (Not sure if we have to do this each time or not)
source = $('#newClients-template').html()
#template = Handlebars.compile source
# Get the latest collections
#collection.fetch()
render: ->
# Render Handlebars template
renderedContent = #template { report: #collection.toJSON() }
$(#el).html renderedContent
return this
selectStylist: (e) ->
console.log 'hit it!'
console.log e
I'm expecting that any time the dropdown is clicked or changed, I'll see the selectStylist function fired. Unfortunately that hasn't happened yet :( I also have inspected the element in Chrome Dev Tools and there are no event listeners set on the object.
I've been stuck on this for a bunch of hours now and have reviewed all the other suggestions for Backbone event listeners (i.e. pass in your this.el as a parameter when instantiating your view), but haven't had any success.
Any help or ideas would be appreciated!
In initialize, you write
#el = $('.containerOuter')
But Backbone.js processes events before initialize—meaning that it's already bound those events to a different #el (which you should see in the DOM as a lonely div).
You can hack this by overriding make, the function that's used to create #el:
make: ->
$('.containerOuter')[0]