Setting a select

[Synchro]

I can set the value of a text input using input@value, but I need to
find an equivalent for selects. I'm guessing I need to create a
'selected="selected"' attribute for each option but I'm not clear how
to do that in a directive, something like (where the selected country
is in the 'country' var:

"select.country option@selected": function(a) {
if (a.context.country == country)
return 'selected';
else return '';
}

My list of options is static, part of the template. This directive
(not surprisingly) results in all options getting set to 'selected'.
This is a bit similar to the problem I had with id values in that they
are dependent on content inside the template, and removing it from
there means that I'll have template stuff in my code.

As I'm rendering this template each time the row is added and
appending it to the list of rows, I'm dropping the select from the
directives altogether and using jQuery to set the selection after the
render with:

$('#select.country:last').val(country);

I don't know if this can be improved, but I think I'll have to put it
down as a downside of using a DOM-based approach.

[Mic (BeeBole)]

There is an example at

The directive is:

{
"option": {
"size <- sizes": {
".": "#{size.val} - #{size.name}",
"@value": "size.val",
"@selected": "size.sel"
}
}
}

Don't jump to quickly on harsh conclusions ;)
I use pure.js as the exclusive rendering engine for our web app. This
makes it ready for many situations.

[Synchro]

On Dec 1, 9:15 am, "Mic (BeeBole)" <tch...@gmail.com> wrote:
> The directive is:
>
> {
>   "option": {
>     "size <- sizes": {
>       ".": "#{size.val} - #{size.name}",
>       "@value": "size.val",
>       "@selected": "size.sel"
>     }
>   }
>
> }
>
> Don't jump to quickly on harsh conclusions ;)
> I use pure.js as the exclusive rendering engine for our web app. This
> makes it ready for many situations.

But doesn't that mean that the list of options must be defined in the
data part? I want it to set the selection in a static list that's part
of the template. So if my template contains:

<select name="myselect">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>

I want to be able to able to provide data like:

data = {"selectval": "c"};

and a simple directive to map that to the selected value (made-up
syntax!):

directive = {"select.myselect=": "selectval"};

and have it render to:

<select class="myselect" name="myselect">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected="selected">C</option>
<option value="d">D</option>
</select>

As far as I can see this isn't possible without reading the values
from the option markup (because otherwise you can't match the option's
value to the data), which is the same thing I was on about in the [id]
conversation.

[Mic (BeeBole)]

You could generate directives on the fly with a selector like:
'option[value="c"]@selected':'"x"'

But I'm not sure it has anything better than a DOM manipulation like
you did.

[luqman paravetty]

Hi Mic,

Thank you for your earlier reply in another topic. I would like to get a solution from your end for same kind issue in this thread. 

i have JSON like {"selector":"xxxxxxxx","multiple":false,"elementType":"Text","regex":"","attribute":"","url":"","pageType":"PHP"}

bold part need to iterate as selected attribute (if element type is Text, Text should be selected) from predefined drop down on template.

<select class="elmentType">

        <option value="Text">Text</option>

<option value="Attribute">Attribute</option>

</select>

Is there any way to use value in element on directive?

eg: '.elmentType option[value="'innerRoomz.selector'"]@selected':'"selected"',

Thanks in Advance.

[Mic (BeeBole)]

Hi Luqman,

Yes you can use any selector.

Here is an example that works: https://gist.github.com/beebole/c5344e5172381ad4d6c03b0a5705b543

Cheers,

[luqman paravetty]

Hello Mic,

Thank you for your valuable time. I would like to get the same for drop down (below). Is it possible to auto selected while template rendering? My JSON will vary "Text" or "Attribute", Will this add attribute "selected as per the JSON"

My JSON : "elementType":"Text"

<select class="elmentType">

        <option value="Text">Text</option>

<option value="Attribute">Attribute</option>

</select>

OR

is there any way to add dynamic value here (below line bold part)? 

 '.elmentType option[value="Text"]@selected':'"selected"',

thanks in advance.

[Mic (BeeBole)]

Yes you can use any selector like 'option[value="Text"]': '...,

This is ok, if you decide what option is selected without the JSON data( when the template is compiled ).

But if you need to select an option based on the JSON data you need to use a function.

'.country option@selected': function(a){

  //return 'x' when the condition to select the option is met

  //for instance:

  return this.optionValue === a.context.theReferenceValue ? 'x' : '';

}


On Wednesday, 30 November 2011 18:44:21 UTC+1, Synchro wrote:

[luqman paravetty]

Hi,

Thank you so much Mic for your great reply & spending time for answering. It's really appreciable and great help for me if you explain why i am not getting this.optionValue on this line return this.optionValue === a.context.theReferenceValue ? 'x' : ''; ?

if i am getting that particular object in function, i can pass the value to same object. But unfortunately i am not getting the object (<option value="">) inside the function.

Thanks in advance.

[Mic (BeeBole)]

optionValue in the example is something that must come from the JSON, not the HTML.

You can't read the HTML inside the function and need to find another way.

You should have in your JSON, all the option values in an array.

Make a loop on them and generate the option tags.

Inside the loop, you will be able to use a function with the @select to choose the right option you want by default.