1

I use ractive.js to bind a selectbox. I should submit the id of option to server, so I use id and name. But for displaying, I should show the text of option.

<select value='{{selectedCountry}}'>
    {{#countries}}
        <option value='{{id}}'>{{name}}</option>
    {{/countries}}
</select>

ractive = new Ractive({
    el: myContainer,
    template: myTemplate,
    data: {
        countries: [
            { id: 1, name: 'Afghanistan' },
            { id: 2, name: 'Albania' },
            { id: 3, name: 'Algeria' }
        ]
    }
});

But I only can get the id, how to get the text in option?

<div>
{{selectedCountry}}
</div>

2 Answers 2

4

Here is how you can make it work with a simple array:

ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    countries: ['Afghanistan','Albania','Algeria']
  }
});

ractive.observe( 'selectedCountryId', function ( id ) {
  console.log( 'saving %s to server', id );
});
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

<script id='template' type='text/html'>
  <select value='{{selectedCountryId}}'>
    {{#countries:i}} <!-- add a semicolon and an identifier to use index during iteration -->
      <option value='{{i+1}}'>{{this}}</option>
    {{/countries}}
  </select>
  
  <p>selected country: {{selectedCountryId}}/{{countries[selectedCountryId-1]}}
  </p>
</script>

<main></main>

3

One way would be to use the country object itself for binding:

ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    countries: [
      { id: 1, name: 'Afghanistan' },
      { id: 2, name: 'Albania' },
      { id: 3, name: 'Algeria' }
    ]
  }
});

ractive.observe( 'selectedCountry', function ( country ) {
  console.log( 'saving %s to server', country.id );
});
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

<script id='template' type='text/html'>
  <select value='{{selectedCountry}}'>
    {{#countries}}
      <option value='{{this}}'>{{name}}</option>
    {{/countries}}
  </select>
  
  <p>selected country:
    {{selectedCountry.id}}/{{selectedCountry.name}}
  </p>
</script>

<main></main>

The alternative would be to find the relevant item using something like lodash's findWhere method:

ractive.observe( 'selectedCountry', function ( id ) {
  var country = _.findWhere( this.get( 'countries' ),  { id: id });
  this.set( 'selectedCountryName', country.name );
});

Obviously that's more code to type, and less efficient (since you need to do the lookup each time), so I'd recommend doing it the first way.

1
  • It works, how about if I bind a simple array? countries: ['Afghanistan','Albania','Algeria']. I just tried, but I can get the value only when I use {{this}}, can I get the index?
    – CL So
    Commented Mar 27, 2015 at 5:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.