jQuery Girl
  1. jQuery Girl
  3. Accéder dynamicment aux propriétés du tableau observable de knockoutjs
Intereting Posts
Forcer jQuery différé à attendre qu’Ajax soit terminé dans le gestionnaire “then” Google map ne s’affiche pas correctement ligne de la table de clonage Existe-t-il un problème d’utilisation d’InnerHTML dans UIWebView dans une application iPhone native? La valeur renvoyée par les événements personnalisés jquery Récupère la position du curseur dans une div contenteditable Les objects hôtes doivent-ils être comptés comme des objects simples dans une fonction isPlainObject? Changer la vitesse d’animation en fonction de la hauteur de l’élément jquery .play ne fonctionne pas sur le mobile jquery-mobile chargé dans une WebView android Ajouter un élément lorsque l’événement “DOMNodeInserted” est appelé Afficher le panneau de prévisualisation automatiquement dans markitup! éditeur Erreur d’intervalle de rechargement de jQuery DataTables ajout d’une seconde animation en utilisant (clic) angular Comment empêcher la fenêtre de défiler vers le haut sur jQuery slideToggle ()?

Accéder dynamicment aux propriétés du tableau observable de knockoutjs

J’utilise le code ci-dessous pour gérer la fonctionnalité de sorting. Ça marche pour moi. Mais existe-t-il un moyen de rendre le code aussi commun et je peux donc l’utiliser à tout moment? 

<span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Username User Name <span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Firstname  First Name <span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Lastname  Last Name

des scripts 

 ui = new ListUI(config); ko.applyBindings(ui); var ListUI = function ListUIF(config) { this.items = ko.observableArray([]); } var item = function itemF(data) { var self = this; self.Username = ko.observable(data.Username); self.Firstname = ko.observable(data.Firstname); self.Lastname = ko.observable(data.Lastname); }

Le code ci-dessus fonctionne bien, mais je ne voulais pas que le code de sorting soit répété. 

 <span class="sorting" data-bind="click: function(){ ui.items.sort(function(a,b){ return a.Lastname  Last Name

Au lieu de cela, je veux quelque chose comme ça 

  Last Name var sortFunction = function sortFunctionF(a, b){ return a.Username < b.Username : -1 : 1; //How to make this common for other property also like Firstname, Lastname etc. }

Il existe essentiellement deux options: avoir trois fonctions sortByUsername , sortByUsername , sortByFirstname et sortByLastname , ou vous pouvez sortByLastname une liaison personnalisée qui prend des informations supplémentaires et configure le sorting.

Le second pourrait ressembler à quelque chose comme ça: 

 User Name  First Name  Last Name

Et puis la liaison personnalisée pour sortFunction: 

 ko.bindingHandlers.sortFunction = { update: function(element, valueAccessor, allBindingsAccessor, viewModel) { var sortBy = ko.utils.unwrapObservable(valueAccessor()); var items = viewModel.items; $(element).unbind('click.sort').bind('click.sort', function() { items.sort(function(a, b) { return a[sortBy]() < b[sortBy]() ? -1 : 1; }); }); } }

Violon

Une autre option mentionnée par Joeseph serait de passer le nom de la propriété à la fonction click, qui renverrait alors une fonction. Je ne pense pas que ce soit une option aussi intéressante que la reliure personnalisée, mais voici un violon qui fait cela: 

 User Name  First Name  Last Name

Et puis votre modèle de vue changerait pour append la fonction: 

 var ListUI = function ListUIF(items) { var self = this; self.items = ko.observableArray(items); self.getSortFunction = function(prop) { return function() { self.items.sort(function(a, b) { return a[prop]() < b[prop]() ? -1 : 1; }); }; }; return self; }