संवाद

Question

समस्या बंधन और jQuery में Select2 '' के साथ नॉकआउट:

Select2 jQuery प्लगइन है जब एक jQuery संवाद एक तत्व नॉकआउट with डेटा बाइंडिंग का उपयोग करता है के तहत नेस्ट पर इस्तेमाल किया काम नहीं करता। with बाध्यकारी निकालें और चयन 2 ठीक काम करता है। यदि with घोंसला वाली संपत्ति से जुड़ा हुआ है तो यह काम करना बंद कर देता है।

पृष्ठभूमि:

तो मैं $$ एक jQuery संवाद फार्म पर काम करने के लिए .... अनुकरणीय के बारे में बात लौकिक गलत पेड़ ing Select2 प्राप्त करने की कोशिश में 3 घंटे की सबसे अच्छी बात के लिए लड़ाई लड़ी है चाहिए , मैंने सोचा कि यह पूरी तरह से jQuery संवाद और चयन 2 था। यह शायद _allowInteraction फिक्स के साथ बहुत शुरुआत से काम करता है। जब तक मैंने समस्या को सरल चरणों तक नहीं तोड़ दिया और तह कारण खुद को प्रकट करना शुरू कर दिया। समस्या with बाध्यकारी के साथ है।

अस्वीकरण

क्षमा याचना मैं एक मूर्खतापूर्ण कंपनी है कि ब्लॉक jsFiddle के लिए काम के रूप में। इसके अलावा मैंने चित्रण उद्देश्यों के लिए अपना कार्यान्वयन तोड़ दिया है क्योंकि वास्तविक मॉडल काफी बड़ा है।

// 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>

fieldset पर data-bind और Select2 निकाला जा रहा है ठीक काम करता है।

data-bindfieldset पर department पर सेट 2 का चयन ठीक है।

data-bindfieldset पर department.selectedTeam चयन 2 काम नहीं कर रहा है।

Answer 1

जब आप नॉकआउट के साथ काम करते हैं, तो बाहरी पुस्तकालयों जैसे कि चयन 2 में बाइंडिंग को लपेटने की अत्यधिक अनुशंसा की जाती है। जबकि आप केवल उन्हें एक बार प्रारंभ करते हैं, with, template या foreach जैसे बाइंडिंग किसी भी समय DOM को संशोधित कर सकते हैं।

आप Select2 आरंभ बहुत जल्दी जब नॉकआउट अभी तक कुछ भी गाया नहीं किया है, या

नॉकआउट दूर फेंक और बाद में किसी समय मार्कअप फिर से प्रतिपादन, इसलिए है कि या तो

1. के खतरे का सामना अपने select2 अचानक

उदाहरण के लिए, यह तब होगा जब Department.selectedTeam बदल दिया गया हो।

मुझे नॉकआउट्स rniemeyer himself here से एक त्वरित और गंदा चयन 2 बाध्यकारी मिला है। इसके अलावा, मैंने केवल चुनिंदा 2 मार्कअप को मानक <select> में बदल दिया और MainModel.department को स्थिरता और सुरक्षा के लिए उचित रूप से देखने योग्य बना दिया।

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>