Knockout 'con' vincolanti e select2 in jQuery dialogo

Question

Problema:

Il select2 plugin jQuery non funziona quando viene utilizzato in una finestra di jQuery nidificato sotto un elemento che utilizza il ko with associazione dati. Rimuovere il binding with e select2 funziona correttamente. Se with è associato a una proprietà nidificata, smette di funzionare.

Background:

Quindi devo aver combattuto per la parte migliore di 3 ore cercando di ottenere select2 a lavorare su un modulo di dialogo jQuery .... parlare di pi $$ ing contro l'albero sbagliato proverbiale , Ho pensato che fosse puramente jQuery dialog e select2. Probabilmente ha funzionato fin dall'inizio con la correzione _allowInteraction. Fino a quando ho rotto il problema fino a semplici passaggi e la causa ha iniziato a rivelarsi. Il problema è con il binding with.

responsabilità

Scuse come io lavoro per una società stupida che blocca jsFiddle. Inoltre ho suddiviso la mia implementazione a scopo illustrativo in quanto il modello attuale è abbastanza grande.

// models 
 

 
function Department() { 
 
    this.name   = ko.observable('dept1'); 
 
    this.selectedTeam = ko.observable(new Team()); 
 
} 
 
    
 
function Team() { 
 
    this.name = ko.observable('team1'); 
 
} 
 
    
 
function MainModel() { 
 
    this.department = new Department(); 
 
    this.showTeam = function() { 
 
    $('#addTeamDialog').dialog('open'); 
 
    }; 
 
} 
 

 
// setup 
 

 
ko.applyBindings(new MainModel()); 
 
    \t 
 
$('#addTeamDialog').dialog({ 
 
    // fix allow select2 to work on the jq dialog 
 
    _allowInteraction: function (event) { 
 
    return !!$(event.target).is(".select2-input") || this._super(event); 
 
    } \t \t 
 
}); 
 
    \t 
 
$('#someList').select2({ 
 
    data: [ 
 
    { id: 0, text: 'enhancement' }, 
 
    { id: 1, text: 'bug' }, 
 
    { id: 2, text: 'duplicate' }, 
 
    { id: 3, text: 'invalid' }, 
 
    { id: 4, text: 'wontfix' } 
 
    ] 
 
});

<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> 
 

 
<button data-bind="click: showTeam">Add Team</button> 
 

 
<div id="addTeamDialog"> 
 
    <fieldset data-bind="with: department"> 
 
    
 
    <div class="lite-dialog-field"> 
 
     <div class="label"> 
 
     <span data-bind="text: name"></span> 
 
     </div> 
 
     <div class="field"> 
 
     <input type="hidden" id="someList" /> 
 
     </div>  
 
    </div> 
 
     
 
    </fieldset> 
 
</div>

Rimozione del data-bind sulla fieldset e Select2 funziona bene.

Se lo data-bind su è impostato su department, select2 funziona correttamente.

Se lo data-bind su è impostato su department.selectedTeam select2 non funziona.

Answer 1

Quando si lavora con Knockout, si consiglia vivamente di racchiudere librerie esterne come select2 in binding. Mentre li si inizializza solo una volta, i collegamenti come with, template o foreach possono modificare il DOM in qualsiasi momento.

si faccia il pericolo di una

1. inizializzazione select2 troppo presto, quando Knockout non ha ancora reso nulla, o
2. Knockout gettare via e ri-rendering del markup in un momento successivo, in modo che la vostra select2 non è improvvisamente legato più

Ad esempio, ciò sarebbe accaduto quando Department.selectedTeam viene modificato.

Ho trovato un binding select2 rapido e sporco da Knockouts rniemeyer himself here. Oltre a questo, ho modificato solo il markup select2 in uno standard <select> e reso MainModel.department in un osservabile appropriato per motivi di coerenza e sicurezza.

ko.bindingHandlers.select2 = { 
 
    init: function(element, valueAccessor) { 
 
     var options = ko.toJS(valueAccessor()) || {}; 
 
     setTimeout(function() { 
 
      $(element).select2(options); 
 
     }, 0); 
 
    } 
 
}; 
 

 
// models 
 

 
function Department() { 
 
    this.name   = ko.observable('dept1'); 
 
    this.selectedTeam = ko.observable(new Team()); 
 
}; 
 
    
 
function Team() { 
 
    this.name  = ko.observable('team1'); 
 
    this.values = ["red", "grey", "blue"]; 
 
    this.selected = ko.observableArray(["blue"]); 
 
}; 
 
    
 
function MainModel() { 
 
    this.department = ko.observable(new Department()); 
 
    this.showTeam = function() { 
 
    $('#addTeamDialog').dialog('open'); 
 
    }; 
 
}; 
 

 
// setup 
 

 
ko.applyBindings(new MainModel()); 
 
    \t 
 
$('#addTeamDialog').dialog({ 
 
    // fix allow select2 to work on the jq dialog 
 
    _allowInteraction: function (event) { 
 
    return !!$(event.target).is(".select2-input") || this._super(event); 
 
    } \t \t 
 
});

select { 
 
    width: 200px; 
 
}

<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> 
 

 
<button data-bind="click: showTeam">Add Team</button> 
 

 
<div id="addTeamDialog"> 
 
    <fieldset data-bind="with: department().selectedTeam"> 
 
    
 
    <select data-bind="options: values, 
 
         selectedOptions: selected, 
 
         select2: { placeholder: 'pick some colors' }"> 
 
    </select> 
 
     
 
    </fieldset> 
 
</div>