Knockout.js cliquez sur la liaison avec les paramètres

J'ai ce petit ViewModel:

function BooksViewModel() {
    var self = this;
    self.books = ko.observableArray(library);

    self.findByLanguage = function(lang) {
        self.books = ko.computed(function() {
            return ko.utils.arrayFilter(library, function(book) { 
                return book.language() === lang; 
            });
        });
    };
}

La findByLanguage méthode des filtres de la matrice par la langue. Dans la vue, im tryign à mettre en œuvre que comme ceci:

<ul class="dropdown-menu">
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage('C')">C</a></li>
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage('Cpp')">C++</a></li>
</ul>

Je suis attemping de réutiliser la fonction en appelant le paramètre de langue à partir de là. Mais si je passe d'une fonction avec la parenthèse sur les données-lier automatiquement appelé.

Comment puis-je y arriver?

InformationsquelleAutor jviotti | 2012-11-04
  1. 9

    Vous pourriez être intéressé par une approche légèrement différente que d'ajouter des champs supplémentaires dans votre Modèle de Vue.

    http://jsfiddle.net/jearles/RN9Dw/

    En ajoutant languages dans le Modèle de Vue, vous pouvez utiliser knock-out pour rendre le menu et la click liaison va automatiquement passer à la langue que l'utilisateur a cliqué à la fonction de gestionnaire. En outre, l'ajout de selectedLanguage comme un fait observable permet à l' books calculée à changer lorsque vous activez ou désactivez une langue.

    HTML

    <ul class="dropdown-menu" data-bind="foreach: languages">
    <li><a tabindex="-1" href="#" data-bind="text: $data, click: $root.filterByLanguage"></a></li>
</ul>
<button data-bind="click: showAll">Show All</button>

<div data-bind="foreach: books">
    <p><span data-bind="text: name"></span>, <span data-bind="text: language"></span></p>
</div>​

    JS

    function BooksViewModel() {
    var self = this;

    self.languages = ko.observableArray(['C', 'C++']);
    self.selectedLanguage = ko.observable();
    self.library = [{name: 'Book A', language: 'C'}, {name: 'Book B', language: 'C++'}]; 
    self.books = ko.computed(function() {
        return ko.utils.arrayFilter(self.library, function(book) { 
          return self.selectedLanguage() == null ||
              book.language === self.selectedLanguage(); 
          })
    });

    self.showAll = function() {
        self.selectedLanguage(null);
    }
    self.filterByLanguage = function(lang) {
        self.selectedLanguage(lang);
    };
}

ko.applyBindings(new BooksViewModel());

    InformationsquelleAutor John Earles
  2. 24

    La meilleure façon d'y parvenir serait de conclure à une fonction qui s'exécute uniquement sur un clic, comme:

    <li><a tabindex="-1" href="#" data-bind="click: function () {findByLanguage('C')}">

    Alternativement, vous pouvez utiliser le contexte de liaison devrait faire l'affaire.

    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind('C')">

    Voici un exemple de la cliquez sur la liaison à l'aide de JS Fiddle (http://jsfiddle.net/uFyaP/1/)

    • Il ne débite pas est appelé myfriend
    • J'ai attaché un JS Fiddle (jsfiddle.net/uFyaP/1), Il ne semble pas fonctionner, mais ce que je ne trouve le long de la voie était qu'il ne fonctionnait pas au début parce que je l'ai laissé dans self.books = ko.observableArray(library); dans lequel bibliothèque n'a pas été défini.
    • C'est exactement ce dont j'avais besoin dans un autre contexte. Il est petit, lisible et élégant. Btw: il fonctionne de la même manière à soumettre les liaisons. Plus d'infos sur le Ko-Doku.
    • Le JSFiddle exemple ci-dessus n'ont pas .lier scénario. Check this out jsfiddle.net/Ly2v90mn
    • Très agréable... cela s'applique non seulement à knock-out, mais de nombreux autres plugins ainsi pour éviter d'avoir une fonction appelée lors de sa définition. JE LOUERAI CETTE SOLUTION POUR LE RESTE DE MA VIE
    • Très belle hack. Je pense que c'est un hack, plutôt que de mettre en place une sorte de belle chose comme mentionné dans la accepté de répondre. Ne sais pas ce qui se serait passé sans cette. Probablement laborieuses loin dans la nuit.

    InformationsquelleAutor Jamie Starke
  3. 1

    Je sais que la question est ancienne, mais au cas où quelqu'un est intéressé, selon docs, le premier paramètre doit être un viewModel, alors qu'il fonctionne comme prévu.

    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind($data, 'C')">C</a></li>
    <li><a tabindex="-1" href="#" data-bind="click: findByLanguage.bind($data, 'Cpp')">C++</a></li>
</ul>
    • Ur solution appel findByLanguage de la charge avant de sur cliquez sur. U ont soit enrouler autour d'une fonction ou de l'utilisation de bind
    • Cette réponse est correcte. La liaison ne sera pas causer de la fonction est appelée, Ravi, et l'ajout de la variable $data paramètre était la seule façon que je pouvais obtenir mon paramètres de la ligne.
    • J'ai mis à jour la réponse après Ravi de commentaires. J'ai négligé le .bind invocation dans ma réponse originale à cette question.
    InformationsquelleAutor Andrii Litvinov