Добавить данные динамически в Framework7 Smart Select? - PullRequest
Новая
       5

Добавить данные динамически в Framework7 Smart Select?

0 голосов
/ 27 сентября 2018

Я пытаюсь динамически добавлять данные в смарт-выбор в Framework7, но не могу заставить это работать.

Я пытаюсь создать фильтр с интеллектуальным выбором.

У меня есть три умных выбора: марка автомобиля, двигатель и количество дверей.

После выбора бренда следующий интеллектуальный выбор должен динамически заполняться содержимым.

Если один двигательвыбрано, количество дверей должно быть динамически заполнено.

Мне не удалось добавить данные динамически.

У меня есть jsFiddle:

https://jsfiddle.net/o2ejupu1/669/

 var app = new Framework7({
    root: '#app',
    theme: 'auto',
    smartSelect: {
        pageTitle: 'Select Option',
        openIn: 'popup',
    },
    data: function () {
        return {
            carBrands: ["honda", "bmw", "ford", "vw"]
        };
    },
    methods: {
        createSelect: function () {
            let carsSelect = document.getElementById("cars");
            app.data.carBrands.forEach(addCars);
            carsSelect.innerHTML = carsSelect.innerHTML + "<option value=" + index + ">" + item + "</option>";
        }
    },
    routes: [{
        path: '/about/',
        content: `
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                <a href="#" class="link back">
                  <i class="icon icon-back"></i>
                  <span class="ios-only">Back</span>
                </a>
              </div>
              <div class="title">About</div>
            </div>
          </div>
          <div class="page-content">
            <li>
  <a onclick="app.methods.createSelect()" class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search car">
    <select name="car" id="carsSelect" multiple>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>
          </div>
        </div>
      `
    }]
});

var viewMain = app.views.create('.view-main');
var smartSelect = app.smartSelect.create({ /* parameters */ });

Кто-то делал что-то подобное раньше, или здесь есть лучший способ сделать это?

1 Ответ

0 голосов
/ 28 сентября 2018

Я думаю, вам не нужно использовать авто-инициализацию smart-select, потому что она будет инициализироваться с текущими опциями выбора, помещенными в выборку. Я бы посоветовал вам сначала заполнить DOM начальными значениями (автомобилями), а затем создатьинтеллектуальный выбор, например: 

  data: function () {
        return {
            carBrands: ["honda", "bmw", "ford", "vw"]
        };
    },
    methods: {
        createSelect: function () {
            let carsSelect = document.getElementById("cars");
            app.data.carBrands.forEach(addCars);
            carsSelect.innerHTML = carsSelect.innerHTML + "<option value=" + index + ">" + item + "</option>";

            //after creating the DOM then you can call in the create smart-select
           app.smartSelect.create('.smart-select')
        }
    }

Примечание: удалить класс smart-select-init из шаблона при загрузке, чтобы инициализировать выбор на лету

...