Knockout.js la liaison avec plusieurs Select2

Ma Question est lorsque j'ai jamais lier mon Select2 avec Plusieurs avec knock-out Modèle de Vue. Après avoir sélectionné l'une des options, les données sont perdues pour la deuxième fois

KnockOutCode

$(window).load(function () {

ko.bindingHandlers.select2 = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var obj = valueAccessor(),
            allBindings = allBindingsAccessor(),
            lookupKey = allBindings.lookupKey;
        $(element).select2(obj);
        if (lookupKey) {
            var value = ko.utils.unwrapObservable(allBindings.value);
            $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) {
                return item[lookupKey] === value;
            }));
        }

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).select2('destroy');
        });
    },
    update: function (element) {
        $(element).trigger('change');
    }
};

ko.applyBindings(new ViewModel());
function ViewModel() {
    var self = this;

    self.MetricsModel = ko.observableArray([]);

    GetMetrics();

    function GetMetrics() {
        $.ajax({
            url: '/Admin/GetMetrics',
            type: "POST",
            dataType: "json",
            success: function (returndata) {
                self.MetricsModel(returndata);
            },
            error: function () {
                alert("eRROR GET Applications");
            }
        });
    };

}
$("#application-select-metrics").select2();    
}

Fichier HTML

    <select multiple="multiple" id="application-select-metrics" class="form-control" data-bind="options: MetricsModel, optionsText: 'Metrics_Name', OptionsValue:'Metrics_ID', optionsCaption: 'Choose...', select2: {}"></select>
@*<select multiple="multiple" id="application-select-metrics" class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>*@

Veuillez noter que les sections commentées, j'.e, les valeurs codées en dur fonctionne, et ça me permet de sélectionner plusieurs valeurs, et à l'aide de knock-out, il travaille pour la première fois, j'obtiens une liste peuplée, mais après avoir sélectionné une fois, pour la deuxième fois, les données sont perdues.

S'il vous plaît aider,

Merci,

EDIT:
Comme mentionné par Hanes, j'ai édité le code, et introduit une liaison personnalisée, mais encore il ne fonctionne pas, je ne pense pas que la mise à jour de la section de la liaison personnalisée fonctionne correctement,que la liste déroulante, le remplir une fois, mais ne parvient pas à lier pour la deuxième fois. Toute aide serait volontiers apprécié.

Salut sœur, mon code est correct. Je obtenir un tableau d'objet de l'appel ajax. qui inturn remplir mes MetricsModel. Je suis capable de faire de multiples sélectionnez pour la première fois que je sélectionne une valeur quelconque, mais quand je pour sélectionner une autre valeur, j'ai "Aucun résultat trouvé" la deuxième fois que je sélectionne. Coder en dur les sélectionner avec les options, il fonctionne comme un charme.
Le code est tout à fait exact. Le violon a été mal parce que la moqué de données a été renvoyé dans le mauvais format. Mise à jour de violon: jsfiddle.net/2Q37X/1
Toutes mes excuses, mes hypothèses sur les données renvoyées étaient faux! J'ai supprimé mon commentaire précédent.

OriginalL'auteur Ronak Jain | 2014-01-15

@rniemeyer jeté sur un JSFiddle pas trop longtemps qui devraient vous aider:

http://jsfiddle.net/rniemeyer/R8UF5/

Son violon, mis à jour

Utiliser la liaison suivants combiné avec un couple d'ajustements de valeur est mise à jour:

ko.bindingHandlers.select2 = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var obj = valueAccessor(),
      allBindings = allBindingsAccessor(),
      lookupKey = allBindings.lookupKey;

    setTimeout(function() { 
      $(element).select2(obj);
    }, 0);

    if (lookupKey) {
      var value = ko.utils.unwrapObservable(allBindings.value);
      $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function(item) {
        return item[lookupKey] === value;
      }));
    }

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).select2('destroy');
    });
  },
  update: function(element) {
    $(element).trigger('change');
  }
};

Ce n' lookupKey faire? Il s'en sort toujours comme undefined. Je ne trouve rien à ce sujet dans le select2 docs.
Voici une version remaniée (avec mise à jour de référence externe Url) qui fonctionne en cascade de menus déroulants. jsfiddle.net/DonovanWoodside/jmtwadu5

OriginalL'auteur crockpotveggies

2

Tout d'abord, en réponse aux commentaires: votre code est correct. Le JSFiddle fait par Jeroen introduit l'erreur dans la moqué appel ajax: il retourne un tableau d'entiers, pas des objets avec les attributs corrects. Le problème se produit uniquement lorsque le select2 est appliquée.

Cause

Vous postulez select2, mais select2 n'est pas jouer gentil avec knock-out. Et pourquoi devrait-il? Il ne sait rien à propos de knock-out et votre viewmodel, et il ne sait pas comment jouer gentil avec elle.

Solution

Vous avez besoin d'un knock-out personnalisé contraignantes pour les select2 de contrôle. Un coup de liaison personnalisée est la façon à assurer l'intégration entre votre knock-out code et 3ème partie de plugins. D'écrire et d'expliquer une telle liaison personnalisée pour vous serait un peu trop beaucoup pour cette réponse, donc je vais plutôt vous donner le lien suivant:
https://github.com/ivaynberg/select2/wiki/Knockout.js-Integration

Il y a une solution qui vous aidera à résoudre le problème. Ils ont aussi un lien vers un JSFiddle, et dans l'ensemble, vous devriez être en mesure de trouver tout ce que vous devez. Si celui-ci est trop complexe pour vous, vous pouvez essayer de googler "select2 knock-out personnalisé de liaison" et de voir si vous pouvez trouver quelque chose de moins complexe.

Une référence à la notion de knock-out liaisons personnalisées: http://knockoutjs.com/documentation/custom-bindings.html

Bonne chance!

Grâce hanes, Est-il quelque chose de moins complexe que vous pouvez proposer. Tout ce que je veux faire, c'est que je veux sélectionner plusieurs valeurs à l'aide de select2 et à l'aide de jQuery, Ajax, j'aimerais pousser les valeurs sélectionnées dans ma couche. J'ai vu les liens u l'ai mentionné. se sent très complexe

OriginalL'auteur Hans Roerdinkholder

Vous devez vous connecter pour publier un commentaire.