I've created a livewire component with some input fields, added a for loop to the parent component with the child component inside.
#for($i = 0; $i < $count; $i++)
#livewire('dashboard.profile.garage-service-list-item', ['garage' => $garage], key($i))
#endfor
Each child component has a delete button. How can the method for this button look like?
Two ways spring to mind. One being that you display an empty view if the item gets deleted, or you fire an event to refresh all the components that are rendered within that loop.
1: Refreshing the parent
This assumes that the parent component is a Livewire component.
In your parent, you can listen for an event to refresh itself. Simply declare a listener in your parent component (the component that has your #for loop), by adding the following.
protected $listeners = ['refreshParentComponent' => '$refresh'];
refreshParentComponent is the name of the event, you could rename it to something more suitable (that name is probably not a good name), and $refresh is the action -- and in Livewire, the $refresh action is a magical action that simply refreshes the component in its entirety, basically re-rendering it. This would mean that you will get a fresh set of data after deleting the item, and render it all with that data.
To make the event trigger, in your Profile\GarageServiceListItem class, where you delete the item, you can fire, or emit, that particular event - and you can emit it upwards. You can do that by calling the emitUp method.
$this->emitUp('refreshParentComponent');
2: Rendering an empty HTML block
You can add a boolean property to your Livewire-component, for example public $show = true;. Then in the base of your garage-service-list-item view, you start by checking that property.
<div>
#if ($show)
<!-- The rest of your component here -->
#endif
</div>
Then in the method where you delete the component, simply set $this->show = false; and you're done! The component will render a empty <div> block.
Livewire events
Livewire properties
Related
ParentForm.js
<FormSection name="ChildRequestForm">
<ChildForm />
</FormSection>
on form submission in ParentForm, it should get values from ChildForm component, this works fine.
But once the ChildForm component has a reduxForm connected
ex:
ChildForm = reduxForm({
form: 'ChildRequestForm'
})(ChildForm);
then the parent form will no longer able to retrieve values of the child form on submit.
I had to wrap the child component with reduxForm as the form requires to dispatch 'change' function and requires access to formvalueSelector
Sandbox Link
https://codesandbox.io/s/jj1mk114n5
any help?
Childform should have the same name as parent form (in your example it is 'foo'). So to make the child form name dynamic, pass a formname prop to your child component and make use of it using mapstatetoprops ownprops.
By this way, you can reuse the child component with parent formname, whenever it is needed.
refer to dis
How do you pass in a dynamic form name in redux form?
My main page renders a list of data coming from controller with foreach
#foreach ($sales as $sale)
<button id="{{$sale->id}}" #click="editClicked({{$sale}})">
#endforeach
I have an edit component placed on the page like this, I display it modally via showEditModal conditional
<edit v-if="showEditModal" #hide="showEditModal=false"></edit>
The component in brief is declared in Edit.vue:
<template name="edit">
...
</template>
This is simply a standard form with input fields, bound via v-model to the sale.
Essentially it is an update form, I intend to load the data from the main page into each input field to be edited.
My app.js simply sets showEditModal = true, in order to display the edit form on top of the main page.
Basically i don't want to have to call controller via GET method on loading the modal since i already have the data in the main page as $sale object, so im just wondering how do I pass in the $sale to the Edit.vue component ?
I thought that in the <edit> component usage, it would need to bind the sale object, however I'm unsure how that would work since it comes from the foreach loop.
I do, also have the data in the app.js method as passed in via #click="editClicked({{$sale}})", but again, i'm unsure how to use that to pass through ?
You're right, you would want to pass the current sale item as a property to the edit modal. What I would do is add a data property to your main Vue called selectedSale.
data:{
selectedSale: null
}
Then in your editClicked method, set selectedSale
methods:{
editClicked(sale){
this.selectedSale = sale
...
}
}
Finally, pass it as a property.
<edit :sale="selectedSale" v-if="showEditModal" #hide="showEditModal=false"></edit>
I have a view model. Person is retrieved from an ajax call
var vm = ko.mapping.fromJS(persons, {});
vm.Hobbies = ko.observableArray();
// other vm objects
After the viewModel is loaded I display the page, now I want to load another part(hobbies) to the view model (working)
// ...ajax call...
success: function(results){
ko.utils.arrayForEach(results.hobbies, function(item) {
vm.Hobbies.push(item);
});
debugger
}
// ...end ajax call...
On the debugger I can see that my Hobbies are now populated.
I have a view that is loaded in on page load
<!--ko if: $data.Hobbies-->
<div>
<ul class="fares-by-date-carousel" data-bind="foreach: Hobbies()">
<li>2</li>
</ul>
</div>
<!-- /ko -->
At the start this portion does not load (as the expensive ajax call hasn't been called yet, which is fine)
but after the vm.Hobbies is populated the above html section still never displays.
not sure what I am missing
The issue is with your usage of:
<!--ko if: $data.Hobbies-->
This should be used when you are scoping to a parent context that is being iterated over. For example you might to something like:
<!--ko foreach: Person -->
<!--ko if: $data.Hobbies-->
In this example $data represents each Person, so the following if check will assess if each Person has a hobby.
If you are not using this structure (with no parent context) then you don't need to scope using $data, you can either use $root for the view model scope (which works even when nested) or leave it off all together. Both should work:
<!--ko if: $root.Hobbies-->
<!--ko if: Hobbies-->
Knockout Binding Context
$parent - This is the view model object in the parent context, the one
immediately outside the current context. In the root context, this is
undefined.
$root - This is the main view model object in the root context, i.e.,
the topmost parent context. It’s usually the object that was passed to
ko.applyBindings. It is equivalent to $parents[$parents.length - 1].
$data - This is the view model object in the current context. In the
root context, $data and $root are equivalent. Inside a nested binding
context, this parameter will be set to the current data item (e.g.,
inside a with: person binding, $data will be set to person). $data is
useful when you want to reference the viewmodel itself, rather than a
property on the viewmodel.
Im struggling to delete a view's instance. On view hbs i use each loop to show view hbs. On another field click i add a " . " to a json object, which then adds another field to the template.
>js>App.ApplicationView = Ember.View.extend({
anotherField: [{name: 'testname'}],
actions: {
moreFields: function(){
this.get('anotherField').pushObject({name: ''});
},
less: function(){
var counter = this.get('anotherField');
counter.shift();
this.set('anotherField', counter);
And hbs
{{#each view.anotherField}}
{{view Ember.TextField}}
{{/each}}
<button {{action 'moreFields' target='view'}}> ++ </button>
<button {{action 'less' target='view'}}> -- </button>
http://jsbin.com/iSUdiCaX/17/edit
Cheers
Kristjan
When you use the shift method Ember doesn't get notified that the anotherField property changed, and therefore it doesn't update the template. You can check this by adding this.rerender() at the end of the less action.
You could:
call this.propertyDidChange('anotherField') to notify the property changed: http://emberjs.com/api/classes/Ember.Object.html#method_propertyDidChange
use the slice method: http://emberjs.com/api/classes/Ember.Array.html#method_slice
var sliced = this.get('anotherField').slice(0, this.get('anotherField').length - 1);
this.set('anotherField' sliced);
I also noticed you're using the View to handle the actions whereas I believe the Controller would be a better place to do so.
EDIT
Well it depends.... I believe the controllers are a good place because they have knowledge of the model (the view also has it via the controller). if your anotherField property is only needed for displaying or event handling logic then I believe it is a good idea to leave it in the view. from docs
Views in Ember.js are typically only created for the following
reasons:
When you need sophisticated handling of user events
When you want to create a re-usable component
But if instead the anotherField property is used the held application state (user selections, needed for computed properties or other actions) then I believe it's better placed inside the controller (and therefore the actions modifying it).
Have in mind your view can handle one part of the action and send it to the controller:
actions: {
something: function() {
.....
this.get('controller').send('something') // calls send action in controller
}
}
I hope this helps!
I'm looking for some clarification on views in Ember.js
Coming from a rails background and I'm trying to ignore any preconceptions. From what I understand of the ember framework there are 5 components:
Routes: This is where we define the state of the application. The state is reflected in the URL. We can also define data loading here. Route classes are defined and on startup ember creates route objects which last for the duration of the application.
Models: This is where object data is defined. Can also define computed properties. A model object is created for each json object returned from the server.
Controllers: This mediates interactions between the models and templates/views. Controller classes are defined and on startup ember creates controller objects which last for the duration of the application. There is only ever a single instance of each controller class.
Templates: These describe the generated markup.
Views: These are specific templates or dom elements relating to a model. These are used to define interface events and send them to the controller for handling. Not sure when to create these.
As an example lets say I have a EventsController that has data loaded on the applicationRoute:
ScheduleApp.EventsController = Ember.ArrayController.extend();
ScheduleApp.ApplicationRoute = Ember.Route.extend({
setupController: function() {
this.controllerFor('events').set('content', ScheduleApp.Event.find());
}
});
Now in my template instead of iterating over each and displaying the information I want to iterate over each and create an associated view so I can add interactions to each event. I presume I would need to create a new view for each event and have it display in my template. However, I'm not sure where I create these views. Do I define a view class and then ember will create a new view object each time I call it using the view helper? Eventually I would like to use the appendTo on the view to inject my events to different places in the dom. Where would this be defined?
I've tried reading over the ember.js guide for views but it describes the context of a creating a single view. I think I want to make many views for each event and then dynamically interact with those objects.
Up to now ember has been outrageously clever so I would assume there is a built in method for generating these views. After all, most user interfaces are full of lists that require interactions. The problem is the list I'm trying to make I then want to spread over the dom depending on its attributes.
As per your code, App.EventsController has a list of events, now let us say we want the UI to have a list of events displayed and for each event say we want the view to have a delete button which deletes the event when the user clicks
One way to accomplish is by using Ember.CollectionView, the collection view as the name suggests is tailored for these sort of requirements, in many Ember examples the usage of view is not defined because ember auto-generates it for you but in some cases we might need to explicitly define a view to meed our requirements
App.EventsView = Ember.CollectionView.extend({
// It needs a list of data to iterate upon
// We are binding it to the controllers content data which
// is a list of events
contentBinding: "controller.content",
appendSpan: function(){
view = Ember.View.create({tagName: 'span'});
this.get("childViews").forEach(function(child){
view.appendTo(child);
});
},
// Now we need to also define a view template that will be
// generated for all the elements in the content array
// This could in turn be another collection view if required
// I am going to keep it simple for now
itemViewClass: Ember.View.extend({
templateName: "event",
deleteEvent: function(){
// Implement Delete
this.get("content").deleteRecord();
},
notifyUser: function(){
// The record doesn't get deleted as soon as user clicks, the request goes to
// server and server deletes the record and sends back the response to the
// client, Hence I'm using an observer here on isDeleted property of the record
if(this.get('content.isDeleted')){
alert("Record deleted Successfully");
}
}.observes('content.isDeleted')
})
})
Important Note Inside the CollectionView definition this.get("content") refers to the array of events, while in itemViewClass this.get("content") refers to the single event object
//Defining the template
//Assuming the event model has a name property
<script type="text/x-handlebars" data-template-name="event">
Name: {{view.content.name}}
<a {{action deleteEvent target="view"}} href="#">Delete Event</a>
</script>
Now when you hit your application_url/events
you'll a list of events each event has a delete button, I hope this clears some concepts
For more information about CollectionView
Update as per the comment:
If you want to append another view to each child view, you can do so by editing the template of itemViewClass as follows
<script type="text/x-handlebars" data-template-name="event">
Name: {{view.content.name}}
<a {{action deleteEvent target="view"}} href="#">Delete Event</a>
{{ view App.SomeOtherView }}
</script>
it can be a partial too as follows
<script type="text/x-handlebars" data-template-name="event">
Name: {{view.content.name}}
<a {{action deleteEvent target="view"}} href="#">Delete Event</a>
{{ partial "somePartial" }}
</script>
or if you want to do it programmatically say, you click a button in the EventsView template and on click all the childs view must have a span tag appended to it(I am very bad at giving examples)
//This is the template for App.EventsController,
//template-name = "events" => view is App.EventsView and controller App.EventsController
<script type="text/x-handlebars" data-template-name="events">
<a {{action appendSpan target="view"}} href="#"> Append </a>
</script>
appendSpan is defined in the CollectionView