I'm trying to make validation directive for elements generated by ng-repeat (validate common logic). And now my problem is: how to group this elements by this ng-repeat cycle?
I decided to set some unique name on my validation directive to differ elements of different ng-repeats.
So how cat I pass this name?
For example ng-model takes object, and I need just string.
To pass single value in attribute directive (like ng-model="myModel") we can use that fact that directive can read values of any neighbor attribute of the host element INCLUDE IT'S OWN. So if we do something like <div my-directive="someValue">...</div> we can read "someValue" in directive linking function via attributes array. Documentation example.
Related
I have the following code:
<input type="text"
#input="disableField($event.target)"
:disabled="isFieldDisabled(????)"
/>
I want to pass to the isFieldDisabled method the same value which I get in $event.target - the element reference. I cannot find the way how to do this. I know that I could use the :ref but in this case I need to do it as shown above.
This is only the example use case. I know that to disable the field I can do it better but I want to show the problem in simplest way.
This isn't possible the way you're asking for it.
The way that Vue works with VNodes, the element won't exist the first time you try to evaluate disabled: Vue evaluates the properties to determine how the DOM should look and then creates the elements to match. As here:
Note that you can only access the ref after the component is mounted. If you try to access input in a template expression, it will be null on the first render. This is because the element doesn't exist until after the first render!
With async components, the attributes will need to have well-defined values even if there isn't a Component to render yet, let alone well-defined elements to position there.
With fragment components, there won't ever be a single HTML element to interact with, because the component represents multiple top-level HTML elements.
Events don't have to play by the same rules, because you're defining handlers: DOM events will come from one source and apply to one target, and absent components don't emit events. Even then, the syntax gives you access to $event, not to an $el for a direct element reference.
The most straightforward way is to use a ref to get to the object after Vue creates it, subject to the same null-on-first-render ref rules above. If you need to pass a handle into a multipurpose method in the shape of getFoo(argument) your argument may have to be a string or enum key you define, not the element itself.
Is is possible to access inputs value inside it's definition/attribute?
For example, if you want an input to be green if not empty but you don't want to use Vue.data.
Like this:
<v-text-field background-color="'green' ? <THISVAL> : 'red'"></v-text-field>
Or do I need v-model and variable defined in the Vue.data?
Yes, you do need v-model and variable defined in the Vue.data.
Why? Remember that vue uses virtual DOM. When this template is being processed for the first time, no actual element is present in DOM, to be access via this.
It needs to know what to render into DOM beforehand.
There is component-template-refs to gain references to actual HTML elements, but these references are assigned after the component is mount, and not needed for use cases like this
I need to perform a bind using the value obtain from a hash-map (basically using the value of hasmap.get(key) ) .
The bind is used on an ng-model from a <select>.
Here is my plunker(at the moment an array is used, but i want to use hash-map to bind based on ng-repeat element):
https://plnkr.co/edit/CxCQ2eJXj9PUeCCVHoi6?p=preview
If what i want to do it is not possible, how can i bind so that i obtain the bind obect dinamically ?
in the mean-time i found the solution, using a C# style hash-map
For the ones interested, see updated plunker :
Plunker[1]
[1]: https://plnkr.co/edit/CxCQ2eJXj9PUeCCVHoi6?p=preview
Let's assume we have few ViewModels with the same property names like Id, Name, also
we have defined a View template (basically HTML) and want to use/bind a data from both ViewModels.
Question is how to specify a binding data context so it would be a way to indicate from which View Model to use bound properties?
As noted on http://knockoutjs.com/documentation/observables.html, optionally you can pass a second parameter to ko.applyBindings to define which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.
Another option would be to use the with: binding introduced on ko 1.3+, which renders the DOM based on a specific viewModel property. This is nice because if the property is null, nothing is rendered at all. Steve shared a live example about this feature on http://jsfiddle.net/StevenSanderson/f5w6u/3/light/
I have a code like this:
<s:select id="s" list="list" listKey="id" listValue="displayValue">
When I get the value from the object I'll always get the id.
How can I change the "listKey" value dinamically so I could get for example, the name of the object (supposing other of my attributes besides id is name ) instead always de id?
I was trying some code in jQuery like this:
function changeListKey(){
var id = $("#s").val();
$('#s').attr('listKey','name');
var name = $("#s").val();
document.write(name); // Only to test if I could get the value
}
When I execute it it doesn't seem to change the "lisKey" value so I could get another one, what would be the solution?
Thanks a lot in advance.
John Smith.
Why would you want to mix up what's used as the key value? That would make a mess on the server side.
In any case, listKey isn't an HTML attribute, it's a custom tag attribute, and is meaningless after the HTML has been rendered and sent to the client. You would need to iterate over the HTML select element's options collection and change the values on the options.
All this said, you'd be much better off doing any bizarre manipulations like this in the action itself, and exposing only the desired key/value pairs to the JSP, either in a list, or more easily, in a map. Using a map eliminates the need to provide listKey/listValue attributes--just use the map's key as the option text, and the value as the option's value.