2012-11-27 1 views
1

Je voudrais avoir une belle vue de grille interactive dans une page HTML. J'utilise nodejs, express, twitterbootstrap, knockoutjs, pour ma pile technologique. J'essaie d'utiliser KOGrid pour afficher différents points de données avec un tri de colonnes et d'autres fonctionnalités de grille.Essayer de créer un événement onclick dans la grille du noeud js en utilisant KOGrid

Mon problème consiste à déclencher un événement lorsqu'un utilisateur clique sur un bouton à la suite. Et passer à cet événement, certains des différents champs de données de cette ligne spécifique. Donc, dans les spécificités de KOGrid, j'utilise cellTemplates et j'ai besoin d'appeler une fonction dans l'événement onclick, mais passer cette fonction à des valeurs bornées de données KOGRID. Donc, dans mon élément d'entrée, j'aurais data-bind = "onclick: [Nom de ma fonction] ([nom de certaines variables délimitées par des données], [nom d'une autre variable bornée]]

moi comment faire ce

Voici un échantillon de mon code ... l'entrée/onclick dans le CBTemplate est où j'ai des problèmes

CBTEMPLATE:.

<script type="text/html" id="actionTemplate"> 
<div data-bind="kgCell: $cell"> 
<input type="checkbox" value="1" class="checkbox" checked="checked" data-bind="onclick: 'MyOnClickFunction(siteId(), status())'"/> 
</div> 
</script> 

DIV TAG:

<div data-bind="koGrid: { data: offer.siteCounts, 
        columnDefs: [ { field: 'templateField0', displayName: 'Site', cellTemplate: 'siteTemplate', width: 150}, 
           { field: 'status', displayName: 'Current Status', cellClass: 'site', cellTemplate: 'statusTemplate', width: 115}, 
           { field: 'details', displayName: 'Details', width: 175}, 
           { field: 'actionField0', displayName: 'Action', cellTemplate: 'cbTemplate', width: 200}], 
        autogenerateColumns: false, 
        displaySelectionCheckbox: false, 
        isMultiSelect: false }"> 
</div> 

Répondre

1

Le click event binding devrait ressembler à ceci avec KO:

data-bind="click: function(data,event) { MyOnClickFunction(siteId(), status()) }" 

Voici un working JSFiddle où vous pouvez jouer avec elle.

Quelques sidenotes:

  • Dans mon exemple, je l'ai utilisé le $rootbinding context property pour accéder à la fonction exemple: $root.offer.MyOnClickFunction. Vous devrez ajuster ceci en fonction du niveau que vous avez défini MyOnClickFunction sur vos modèles de vue.

  • Vous devez return true du clic contraignant gestionnaire si vous ne voulez laisser le défaut, cliquez sur l'action de procéder (par exemple cochant la case, etc.)

+0

exactement ce que je cherchais. Merci! – dan27

Questions connexes