Closed bdelano closed 8 years ago
osbornm
commented
8 years ago http://knockoutjs.com/documentation/click-binding.html
when the items is clicked have the handler set a isSelected observable and use that to "display" the item as being selected.
I'd recommend running though http://learn.knockoutjs.com/ to get a feel for observable style applicaitons.
bdelano
commented
8 years ago Thanks Matthew,
Apologies as I must be missing something obvious…
I have been through the tutorials and I get them to work just fine; however, I assume I am missing something because I can’t see how this relates to the ViewModel in the cyclops
What I am after is in the
e.g.
var ViewModel = function(){ var self = this; self.loading = ko.observable(true); self.items = [ { id: "qa1", name: "QA1 - US West (Bellevue)", href: "#qa1", items: ko.observableArray([]), icons: ko.observableArray(["#icon-circle-o"]) }, { id: "qa3", name: "[Private] QA3 - US West (Spokane)", href: "#qa3", items: ko.observableArray([]), icons: ko.observableArray(["#icon-circle-o"]) } ] self.selectedItemId = ko.observable('qa3'); self.onClick=function(){ alert(‘test’); } return self; };
In the above I have tried to access the event but it doesn’t seem to work, can you please point me in the correct direction.
Kind Regards Brian
From: Matthew Osborn [mailto:notifications@github.com] Sent: 14 July 2016 22:17 To: CenturyLinkCloud/Cyclops Cyclops@noreply.github.com Cc: Delano, Brian Brian.Delano@CenturyLink.com; Author author@noreply.github.com Subject: Re: [CenturyLinkCloud/Cyclops] Help Wanted: Pane Usage (#57)
http://knockoutjs.com/documentation/click-binding.html
when the items is clicked have the handler set a isSelected observable and use that to "display" the item as being selected.
I'd recommend running though http://learn.knockoutjs.com/ to get a feel for observable style applicaitons.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/CenturyLinkCloud/Cyclops/issues/57#issuecomment-232794994, or mute the threadhttps://github.com/notifications/unsubscribe/ATfT3FzvXUxfljUxtNg9EKRDh2jFzZjeks5qVqcygaJpZM4JLNBC.
This communication is the property of CenturyLink and may contain confidential or privileged information. Unauthorized use of this communication is strictly prohibited and may be unlawful. If you have received this communication in error, please immediately notify the sender by reply e-mail and destroy all copies of the communication and any attachments.
osbornm
commented
8 years ago I misunderstood the question, I did not see the part about the pane.
The pane does not support onClick event / wiring up, documented here. This was specifically done because the pane is a navigation component and we mandate that navigation within the application change the URL. This is done to support "Deep linking" to pages as well as "right click > open in new tab" scenarios.
The pane is basically a glorified link of anchor links that a user can click on. The application is responsible for setting the selectedItemId based on the URL. For SPA style application these links are often "client side" and do not trigger full page refreshes (see something like: https://visionmedia.github.io/page.js/)
bdelano
commented
8 years ago I did read that in the docs assumed I was missing something as the ctl.io website does not appear to refresh the page every time a link is clicked.
As the dataset I will be using in the pane is quite large I would rather not reload it every time a link is clicked, so I guess I will look for some other options.
The page.js stuff looks interesting but clearly demonstrates to me my ignorance regarding modern web development.
Many thanks for your time.
-Brian
From: Matthew Osborn [mailto:notifications@github.com] Sent: 15 July 2016 14:41 To: CenturyLinkCloud/Cyclops Cyclops@noreply.github.com Cc: Delano, Brian Brian.Delano@CenturyLink.com; Author author@noreply.github.com Subject: Re: [CenturyLinkCloud/Cyclops] Help Wanted: Pane Usage (#57)
I misunderstood the question, I did not see the part about the pane.
The pane does not support onClick event / wiring up, documented herehttp://assets.ctl.io/cyclops/1.5.0/knockoutComponents.html#pane. This was specifically done because the pane is a navigation component and we mandate that navigation within the application change the URL. This is done to support "Deep linking" to pages as well as "right click > open in new tab" scenarios.
The pane is basically a glorified link of anchor links that a user can click on. The application is responsible for setting the selectedItemId based on the URL. For SPA style application these links are often "client side" and do not trigger full page refreshes (see something like: https://visionmedia.github.io/page.js/)
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/CenturyLinkCloud/Cyclops/issues/57#issuecomment-232953480, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ATfT3A__FWBZ0R5Sl2Ga3vrZ19KmtJONks5qV435gaJpZM4JLNBC.
This communication is the property of CenturyLink and may contain confidential or privileged information. Unauthorized use of this communication is strictly prohibited and may be unlawful. If you have received this communication in error, please immediately notify the sender by reply e-mail and destroy all copies of the communication and any attachments.
I realize I am probably missing something obvious (never used knockout before) but I am trying to access the Click event on individual elements in the and I cannot seem to work it out. Do I need to resort to setting up my own event listener or can I do this through the ViewModel? Also, is there any way to set up an element to be the selected Item when clicked? I really don't want to have to reload the page every time I select an element?