I'm trying to add an on-click inside a Polymer dom-repeat section. Looking at the documentation here, Polymer seems to do this automatically and store the data in a 'model' property.
Using this, I've been able to get the data (username) I want by doing this:
let username = event.model.__data__.user.username;
However, although this works, it definitely doesn't look right... Does anyone have any pointers?
So, despite what is printed out if you do console.log(event.model), you can actually just bypass the data altogether and just do:
event.model.user.username;
Related
I have a form for creating/editing an Excursion record, which has_many :excursion_images.
In this form, the nested excursion_images are created by a js with a remote call (Fine Uploader).
This solution works perfectly on edit Excursion, but not on creating, as the parent doesn't yet have an id.
I have a solution but not sure if there is a better alternative:
allowing the excursion_image to be created without a excursion.
creating a hidden field with an "image_code" on the _new form.
when creating an excursion_image, inside the form, save the corresponding "image_code" on an attribute.
when saving the excursion, find all excursion_image with the "image_code".
Doesn't seem very efficient! Is there any other way?
The solution you have come up with is perfect. It does not seem very efficient but that is the only way. I don't think there is any workaround to store child before the parent.
I myself had quite a trouble with the similar situation before I ended up doing exactly what you have done.
Just that you will have to delete all the images, periodically, where Excursion is nil (as per the comment by #paul-noe)
I don't know if you have already looked into it but I believe inverse_of can be used to solve issues like this, there's some good explanation here
It basically helps you to work with associated record that are in the memory
I didn't know how to properly ask this question, so first sorry about the bad title.
Basically, to explain the problem I use the context of a web application that I am building with vueJS.
In this application I have a simple table that is rendered with data that comes from the server, basically I get an array of objects, and each object has some properties, the scope of the properties is not important.
Now I want to display some data in a table, and if some of the properties don't come from the server, I want to hide the property on the table, but keep the structure of the table, the missing property should have a empty space on the table.
I did it this way:
<div :style="{'visibility': computedValue}"></div>
This compute value basically is a computed property that returns the 'hidden' or 'show' for the visibility property.
But this brings some issues; on the computed property I am returning data based on the property object, for example:
company.createdAt can be undefined and I still have a error if I use visibility with :style.
I come from an angular environment where v-if and v-show were a little different, I know that v-if takes the element out from the DOM and v-show keeps it, but in vue if I do the above example with v-show it still works as v-if in the way that the rendered data works like the data was removed from the DOM.
I just wanted the empty space like it still is there.
Any help or explanations on this?
You can add your own v-visible using a vue directive. Simple add this:
Vue.directive('visible', (el, bind) => {
el.style.visibility=(!!bind.value) ? 'visible' : 'hidden';});
Then use it like you would v-show
You're trying to hide the element but preserve the space, right? vue-visible is a simple npm package that I used recently to do that; the benefit is when you include it, you can very easily and semantically use it like this: v-visible="value", just like v-show or v-if, with value being true/false.
For our application , we have initial load with data. We use those data to generate dynamic id and classes.
There are another api call we make to reload missing data. now the problem is if reload function bring different information, elementId complains that changing id is not allowed
like this(without api call)
https://ember-twiddle.com/394755fd5b355dd93cd147d4610fbf5e?openFiles=controllers.application.js%2Ctemplates.components.my-component.hbs
now , is there a good work around for this issue keeping this logic?
You're looking for a workaround. so have you considered to not use embers own div?
if you specify tagName: '' on your component, the component itself wont produce a div.
Next you can do <div id={{myId}}>...</div>, which will update correctly.
In my angular controller, my model does not exactly reflect the way the data is displayed on the screen. To display the data anyway, I use a method bound to $scope to extract the data to show.
<a href='#' editable-text="???" onaftersave='setData($data)'>
{{ getData() }}
</a>
Showing the data works fine, but saving doesn't. Lacking an alternative, I used onaftersave to save the data. However, it seems that one needs to specify editable-text in order to get x-editable to work. Is there anything else I can do?
I try to answer my own question (in hope it's of use for anyone who stumbles upon the same problem):
After reading parts of the source code, I think it is not possible to do this. I guess the whole point of having a controller is to transform the data into a format that is easy to display (i.e. in a way that x-editable can directly access it).
I am adding an id to an element via call to jQuery.data:
$layout.nextAll('.imagepicker').data('imgPickerId', randomnumber);
So my element of a class imagepicker will have [imgPickerId=randomnumbervalue] data attribute added to it.
It seems like there is a problem how I later on look for .imagepicker with exactly this imgPickerId. Where can I lookup which attributes are added to a particular element in a convenient way (excep from js code)? Maybe in firebug somewhere?
P.S. for some reason my "getter code" works in jQuery 1.6 but does not in 1.7. Still I am suspecting data isn't being added to an element and need a way to check it.
jQuery's data function stores everything in JavaScript, without altering the DOM in any way. I'm afraid you'll have to use code to access it.
A quick Google search also showed me a FireQuery plugin for Firebug, which seems to enable you to see the attached data of your elements. Haven't tried it myself, though, so I can't confirm that.
Update: Tested it, and it works fine! With FireQuery all data of your elements are visible right next to the HTML:
Have you considered in writing your data in an custom attribute like data-imgPickerID="someID"?
For sure this does not allow you to save huge data but you could inspect it via firebug and since you are only saving an ID it would fit for your needs.
Which is also very cool about the .data() method is you can retrieve your custom attribute from above like so .data("imgPickerID");
data() will save data in memory (of course linked to the elements in your selector), it doesn't write things on the element, so you can't look at that in firebug.
You can pre-populate elements with some data by using the html5 data attibute though
Look at this question for an expanded explanation
How does jQuery store data with .data()?