Smart selec for dummies

Questions
1

Hello.
I am new with framework7 . I am trying to implement an Smart Select but so far I am absoluty stack and example works really well but I need to charge the items in the smart Selec using a service.I have found an anwers on stackoverflow but is more confused for me:

So, please,could anyone write an example for dummies charging a smartSelect with data

this is my html

    <a class="item-link smart-select smart-select-init" data-open-in="popover">
     <select name="superhero" id="gender" >
     <option value="Batman" selected>Batman</option>
     <option value="Superman">Superman</option>
     <option value="Hulk">Hulk</option>
     </select>
     <div class="item-content">
     <div class="item-inner">
     <div class="item-title">Titulo</div>
     </div>
     </div>
    </a>
    ```

and this is my javascript 

function loadData(){

    var data = _db_getData(); //get data from database
    myApp.smartSelect.create('.smart-select');
    myApp.smartSelect.get('.smart-select').setValue(data);

  //does not work I guess I have to implement more staff...

}
2

hi, do you speak spanish?

you can use components to get data from the backend and show it in the frontend

routes = [
  // ...
  {
    path: '/some-page/',
    // Component Object
    component: {
      template: `
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">{{title}}</div>
            </div>
          </div>
          <div class="page-content">
            <a @click="openAlert" class="red-link">Open Alert</a>
            <div class="list simple-list">
              <ul>
                {{#each names}}
                  <li>{{this}}</li>
                {{/each}}
              </ul>
            </div>
          </div>
        </div>
      `,
      style: `
        .red-link {
          color: red;
        }
      `,
      data: function () {
        return {
          title: 'Component Page',
          names: ['John', 'Vladimir', 'Timo'],
        }
      },
      methods: {
        openAlert: function () {
          var self = this;
          self.$app.dialog.alert('Hello world!');
        },
      },
      on: {
        pageInit: function (e, page) {
          // do something on page init
        },
        pageAfterOut: function (e, page) {
          // page has left the view
        },
      }
    },
  },
  // ...
]

https://framework7.io/docs/router-component.html#component-options

1 Like
3

Thank you but that is what I can see in the documentation, nothing new :frowning:

4

I don’t understand what you need then.
You want an example on how to do it?

5

I want a example please , a basic one something like.
1.- create a html element
//html code about it

2.- create the component
//javascript code

3.- get the compoment and full it with the data you want
//javascript code

Thanks

6

jsfiddle

1 Like