Popup à l'aide de knock-out js

je suis à la migration d'un de mes anciens plugins jquery de DOM jungle à cette fantaisie mvvm cadre des huitièmes de finale.

Quelle technique dois-je utiliser pour afficher correctement un popup contenant? J'ai à remplir "par appeler" depuis, je reçois un flux json à chaque fois.

J'ai essayé une approche de l'aide de la liaison, mais il reste encore des tentatives pour remplir la partielle lors de sa première exécution. 

<!-- ko with: daySubmitFormViewModel -->
    <div class="ec-consulation-lightbox">
        <form id="cForm" class="form-container">
           //Some bindings here.
        </form>
    </div>
<!-- /ko with: -->
InformationsquelleAutor artisticMink | 2013-02-24
  1. 5

    Il peut être fait sans liaison personnalisée ainsi. Exemple ci-dessous

                <div class="modalWindowBackground" data-bind="visible: popupDialog" >
                <div class="modalWindow" data-bind="with:popupDialog">
                    <div class="content">
                        <h2 data-bind="text: title"></h2>
                        <p>
                            <span data-bind="text: message"></span>
                        </p>
                        <div class="buttonSpace">
                            <input type="button" class="closeButton" data-bind="value: closeButtonText, click: $root.hidePopupDialog" />
                        </div>                            
                    </div>
                </div>
            </div>

    Viewmodel code:

        self.showAlert = function (title, message, closeButtonText) {
        self.popupDialog({ title: title, message: message, closeButtonText: closeButtonText });
    };
    self.hidePopupDialog = function () {
        self.popupDialog(null);           
    };

  //Code which opens a popup
  self.remove = function () {
        .... some code ...
        if (someCondition) {
          self.showAlert('SomeTitle', 'Message', 'OK');
          return;
        }
        .... some code ...
   };
    • Il a été inspiré par Anders violon
    InformationsquelleAutor Maxim Eliseev
  2. 7

    Créer une liaison personnalisée, avoir sa fonction d'ouverture /fermeture de déclenchement sur une observable.

    J'ai fait une liaison personnalisée pour jQuery boîte de Dialogue qui utilise cette approuch en combinaison avec un KO
    des modèles de.

    <div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div>

    Vous pouvez trouver mon contraignant ici, avec quelques autres
    https://github.com/AndersMalmgren/Knockout.Bindings

    Démonstration en direct http://jsfiddle.net/H8xWY/102/

    InformationsquelleAutor Anders
  3. 2

    https://github.com/One-com/knockout-popupTemplate

    C'est à peu près fait ce que vous demandez. Il est profondément configurable, et en vertu de développement stable (nous l'utilisons dans nos applications web nous-mêmes).

    Disclaimer: je suis un One.com développeur. Je suis également la personne à l'origine de l'mentionnés ci-dessus lib.

    InformationsquelleAutor Gert Sønderby