two-way bind с Select2 в aurelia.io

Вопрос

Как осуществлять ссылку two-way с одного объекта до VM в aurelia.io, не теряя функциональности Select2 и поддерживая полную ссылку оригинала, и что кроме того изменениям в VM показался отраженными в Select2.

Контекст

Я работаю в проекте, где был осуществлен книжный магазин aurelia.io, в то время как осуществлен в различных точках проекта plugin Select2; проблема коренится в, который после того, как инициализирует этот plugin, заменяет dom серией divs и других объектов, теряясь так binding с оригиналом, который пребывает скрытым в поле зрения, пока он занимается с новым искусственным, созданным plugin Select2.

UPDATE 1

Это пример того, чего хотят добиться.

Код HTML:

    


Код TypeScript:

export class Sublineas{

    Lineas: linea[] = [];
    sublinea_seleccionada: subLinea = new subLinea();   

    mostrarIdLineaSeleccionada() { 

         alert(`Se ha seleccionado la Línea con Id ${this.sublinea_seleccionada.LineaId}`); 

    }

    asignarLineaPorDefecto(){

        this.sublinea_seleccionada.LineaId = 1;

    }

    attached() {

       var self = this;

        $("select").on("change", event => {

           self.mostrarIdLineaSeleccionada();

        });

        $("select").select2();

    }


}

UPDATE 2

Я нашел этот ответ в SOen, но в примере, который себе предлагает Select2, только функционируй в one-way, а именно, только обнови в стоимости в view model, но он не становится отвечающим современным требованиям с изменениями в том же самом.

12
задан 23.05.2017, 15:39
2 ответа

Соединять объект в выбор Select2?

Я считаю формуляр Select2 таким:

<require from="./select2"></require>
<select select2="selected-values.two-way: selectedStuff" data-placeholder="Choose Stuff" multiple>
    <option repeat.for="thing of stuff">${thing.id}</option>
</select>

С которым я могу соглашаться в selectedStuff, который является договоренностью ids вещей, которые я выбрал. Однако, мне хотелось бы получать договоренность этих вещей и не Вашего ids. В моем случае использования, не является реальным искать что-то с Ваш пойдите.

Есть какой-то способ вынуждать с целью элемента вручения мне договоренности вещей, в которой я нуждаюсь вместо договоренности Вашего ids?

Ответ:

Стоимость признака элемента <option> только прими цепи. Используй модель признака, чтобы хранить элементы не-цепь:

<select select2 multiple value.bind="selectedThing2">
  <option repeat.for="thing of things" model.bind="thing">${thing.name}</option>
</select>

Здесь есть plunker функционировавший:

Здесь - документация, связанная в aurelia:

Связанные вопросы:

  • How to change the css of цвет of select2 tags?
  • Using select2 with многообразный choices and удвойся пойдите оцени
  • Programmatic selection of select2 which retrieves its датирует путь Аякс
  • Select2 with ajax, многообразный and нокаут binding not saving objects to selectedOptions
  • Preselect оцени in Select2 for ajax вступи в брак
  • Select2 4.0 - initialize with tag not in восходит list
  • Шоу 2 options and then “and x обитал” (select2)
  • select2 4.0 - TypeError: $ (…) .select2 (…) .select2 (…) is undefined
  • How do I get в select2 контроль to center itself?
  • Аурелия trying to похвалите HTML from Select2?
1
ответ дан 01.12.2019, 08:17
  • 1
    мальчики, также это не, чтобы это поражать в негативы, мы можем брать на себя труд это издавать для того, чтобы он не находит проблемы. – SalahAdDin 07.12.2015, 10:27
  • 2
    Большой opci и # 243; n соглашаться прямо на объект вместо простой стоимости, но равно как soluci предыдущему ответу в примере plunkr, который ты даришь нам, не кажется отраженным и # 243; n two-way binding , быть и # 237; в гениальный, если ты мог дарить нам пример этого типа между двумя Select2. – Henry Rodriguez 09.12.2015, 17:45

Почему не становится отвечающей современным требованиям стоимость в view-model? Будь книжный магазин имеет некие сходства по отношению к другим книжным магазинам, которые они используют также bind в моделях, например, Backbone. Как Backbone, так и Аурелия "признают", когда осуществилось изменение стоимости в каком-либо из Ваших признаков, так как они подписывают в события как "неудар в лунку" или "change", как это был тип элемента html, и следовательно, именно там синхронными изменения с view. В Вашем случае, это единственная деталь, которой нет. Но перед тем, как входить относительно решения, мы должны знать какие-то важные детали книжного магазина select2, что влияют на функционировать binding Аурелии.

Недостатки select2.

Поскольку хорошо Вы продемонстрировали, книжный магазин select2 предпочитает серию элементов html, что стремятся renderizar к их собственному рисунку. Несмотря на это, select2 упорядочивают их, чтобы показывать стоимость первоначального элемента <select> и возможно подтверждать это, послав формуляр. Однако, теряется важный фактор, предпочтя этот рисунок, и - что события click и change уже они не освобождаются в первоначальном элементе. Что это означает?, далее пример:

<select name='capital' id="capital">
  <option value="Santiago">Chile</option>
  <option value="San José">Costa Rica</option>
  <option value="Kingston">Jamaica</option>
</select>

Мы будем добавлять listener события change общий и текущий:

var elemento = document.getElementById("capital");
elemento.addEventListener("change", mostrarCapital);

function mostrarCapital(){
  console.log(elemento.value);
}

Выполнив предыдущий код в браузере, мы можем подтверждать, что каждый раз, когда выбирается выбор, этот показывает нам из-за консоли новую стоимость select. Хорошо, сейчас мы добавляем в книжный магазин select2:

var elemento = document.getElementById("capital");
elemento.addEventListener("change", mostrarCapital);

function mostrarCapital(){
  console.log(elemento.value);
}

// iniciar select2
$('#capital').select2();

Прощание события! Каждый раз, когда мы выбираем выбор, он ничего не перемещает. Уже он не показывает стоимость, выбранную в консоли. Это проистекает того, что select2 он не завершает такие события в первоначальном элементе.

Смоги подтверждать этот онлайновый пример с http://jsfiddle.net/manix/zax7f1vk/

Почему теряется первоначальный bind <select>?

Действительно он не теряется, и согласно выражению ранее, select2 - только другой componenente, который считает ссылкой начальную стоимость <select>. Тогда, каждый раз, когда мы загружаем страницу того, что случается, один one-way bind, так как действительно, select2 он распознает начальную стоимость согласно bind модели, но никогда не случится разгрузка view > view-model, потому что события изменения (change) никогда не завершены, и следовательно, Аурелия никогда не обращает внимание на новую стоимость <select>.

Наконец, решение

Есть два недостающих предмета головоломки для (1) двунаправленная синхронизация two-way и (2), не теряя функциональности select2:

  1. Завершать событие change programadamente на элементе <select> в вопросе для того, чтобы Аурелия сделала оставшуюся часть. Мы это делаем с clase.lanzarEvento(e.target):

    attached() {
        var clase = this;
        $("select").on("select2:select", function(e) {
           clase.lanzarEvento(e.target);
        });
        $("select").select2();
    }
    

    С линией clase.lanzarEvento(e.target); мы бросаем вручную событие "change" на <select> оригинал. Следующий код содержит определение события:

    lanzarEvento(elemento) {
        // creamos el evento de cambio
        var eventoDeCambio = document.createEvent('Event');
        eventoDeCambio.initEvent('change', true, true);
    
        // despachar el evento
        elemento.dispatchEvent(eventoDeCambio);
    }
    

    В этой точке, Аурелия была сообщена и поэтому он закончит тем, что дополнит bind с разгрузкой view > view-model так как extrarerá стоимость, которая находится в элементе, и он это обновит в модель.

    В онлайновом примере, напечатанном в http://plnkr.co/edit/qJOPr6?p=preview он сможет видеть это поведение.

  2. Он заметит что в предыдущем примере, кликнув на кнопке "Выбирать Nissan" компонент select2 не становится отвечающим современным требованиям. Это проистекает того, что, как мы знаем, это компонент, которого нет ни у какого bind, так как он bind он присоединен прямо в (как он должен бы быть). Тогда: как мы это решаем? К сожалению инструмент plnkr.co он не позволяет мне толкать дальше использованный demo, потому что он не считает уполномоченным модуль ObserverLocator что решает этот вопрос. С вышеупомянутым модулем мы можем знать, когда было сделано изменение на определенном признаке. Выражение другой формы, разгрузка имела бы следующую форму:

    - Observando cambios sobre "auto"..
    - ¿se ha encontrado un nuevo valor?
    * si: actualizar el componente select2 (a nivel de interfaz)
    * no: flujo normal
    

    Однако, здесь я оставляю код ссылки, по крайней мере пунктуальные изменения, на котором я только что упомянул:

    // injectar el módulo
    import {ObserverLocator, inject} from 'aurelia-framework';
    
    @inject(ObserverLocator)
    export class App {
    
    // se suscribe a los cambios del atributo "auto"
    constructor(observerLocator) {
    
       var suscription = observerLocator
       .getObserver(this, 'auto')
       .subscribe(this.actualizarComponenteAutos);
       }
    
    // marcar la opción correcta en select2
    actualizarComponenteAutos(newValue, oldValue) {
        $("#auto").val(newValue).trigger("change");
      }
    

    Исходный код может видеть это я завершаю в http://plnkr.co/edit/AZFXwo

Заключение

Я знаю, что ответ очень широк, но были детали, которые он не хотел переместить из-за высоты, особенно, потому что он хотел проиллюстрировать как, и когда был дан bind one-way и two-way.

6
ответ дан 01.12.2019, 08:17
  • 1
    сначала я хочу aclarte, чтобы я не проголосовал за тебя в против. секунда подсказка: чтобы округлять post podr и # 237; схвати изменять plunkr, который присоединен со связанным вопросом Стакк Оверфлов к твоим изменениям, и показывать, что этот soluci и # 243; n функционируй. Это har и # 237; в этого ответа, который кажется хорошим, полный ответ. – rnrneverdies 07.12.2015, 08:03
  • 2
    @rnrneverdies, большое спасибо из-за Вашего комментария. Итак, извините мое неведение, но и #191; qu и # 233; он plunkr? – manix 07.12.2015, 08:08
  • 3
    Он, как jsfiddle, это соединение в plunkr, который упоминает о тебе: plnkr.co/edit/mEpr8E? p=preview ты можешь forkearlo и решать там тему, остался бы функционировавшим demo, что любой может видеть, если ты помещаешь соединение твоему fork в вопрос. – rnrneverdies 07.12.2015, 08:10
  • 4
    Уже я понимаю, perfect и # 237; simo. jsfiddle уже он conoc и # 237; в. Очень любезный. – manix 07.12.2015, 08:13
  • 5
    Ответ complet и # 237; пропасть, но в примере plunkr, который ты даришь нам, не оказывается отраженным soluci и # 243; n two-way binding, быть и # 237; в гениальный, если ты мог дарить нам пример этого типа между двумя Select2 посредством binding aurelia. С другой стороны я замечаю, что мой вопрос est и # 225; неполная или он не отражает 100 % то, что любит, схвати и # 237; к которому относиться, и # 233; издавания ее, чтобы давать разобраться в лучшей форме, что ищется. – Henry Rodriguez 07.12.2015, 19:56