0

I am trying to understand a button on a third party site my company uses. The button signs up a user for a class.

<a class="btn btn-large btn-blue" href="javascript:void(0);" 
        data-bind="click: $root.clickAction.bind($data, ActionType)">
        <span data-bind="text: Title">Sign up</span></a>

I was hoping to provide this button on a page in our company internal website, but I am not familiar with Knockout. I understand a GET request so if that button did something like this then I would get it.

thirdparty.com?method=register&classId=1234&userId=abcde

Is it even feasible to turn that knockout button into a GET or to somehow provide the signup mechanism on our internal sites to this 3rd party site? I can certainly paste more of the source as I'm sure more is needed.

I've tried using Firefox developer tools and viewing network traffic. I don't want to keep spinning my wheels if this isn't doable.

jeff
  • 3,618
  • 9
  • 48
  • 101

1 Answers1

1

Knockout provides several objects to access different levels of context and $root is of them. The $root object represents the main view model object in the root context. For instance, if your HTML element is inside another binding context, such as inside a foreach, and you want to use a root view model's method in each iteration:

 var ViewModel = function() {
    this.actionTypes = ko.observableArray([
        { ActionType: "Type A", Title: "Title A"},
        { ActionType: "Type B", Title: "Title B"},
        { ActionType: "Type C", Title: "Title C"}]);

    this.clickAction = function(action) {
        // your ajax request would go here
        alert(action);
    }
};

ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: actionTypes">
    <a class="btn btn-large btn-blue" href="javascript:void(0);" data-bind="click: $root.clickAction.bind($data, ActionType)">
         <span data-bind="text: Title">Sign up</span>
    </a>
<div>
Rafael Companhoni
  • 1,780
  • 1
  • 15
  • 31
  • ok so I see then I see a $(function() { itemDetails = "Actions":[{"Title":"Sign Up","ActionType":0},{"Title":"UnRegister","ActionType":2},{"Title":"Request Info","ActionType":4}]}, bunch of other stuff. – jeff Mar 07 '17 at 19:54
  • It looks like your observable array is itemDetail.Option.Actions -- in that case $root will allow you to use a method from 'itemDetail' -- so $root.clickAction(actionType) would be equivalent to itemDetail.clickAction(actionType) – Rafael Companhoni Mar 07 '17 at 20:36
  • So I should be searching somewhere for a this.clickAction ? – jeff Mar 07 '17 at 20:47
  • Yes -- clickAction is a method available in the $root context when inside a foreach iteration. The $root for 'Actions' should have the 'clickAction' method. – Rafael Companhoni Mar 07 '17 at 20:50
  • I've marked answer as it has helped. I have more to figure out with my overall goal but probably warrants new questions. – jeff Mar 08 '17 at 11:14