How to get knockouts sibling data-bind properties

Question

UPDATED: See jsfiddle link below

UPDATED Again - See Update 2

I have the following HTML:

<button type="button" data-who="Appellant" data-bind="click: showLetter, hasFlag: { value: DeterminationLettersGenerated, flag: Enum_AppealParties.Appellee, enableIfTrue: true }">View</button>

Within the showLetter function I would like to do something like this:

self.showLetter = function (model, event) {
  var flagValue = $(event.target).data("bind").flag;
  ...
}

And by sibling, I mean siblings to the actual click event that is bound. I just need to get whatever will get me Enum_AppealParties.Appellee.

I have tried numerous combinations of ko.toJS, ko.toJSON, $.parseJSON and JSON.stringify. They always return me a string of the following with quotes or escaped quotes around it:

click: showLetter, hasFlag: { value: DeterminationLettersGenerated, flag: Enum_AppealParties.Appellee, enableIfTrue: true }

What I NEED is the above string converted to JSON so at worst I would need to do the following in code:

self.showLetter = function (model, event) {
  var magicObject = SomeAwesomeAnserHere();
  var flagValue = magicValue.hasFlag.flag;
  ...
}

UPDATE: Re the request to see a repo of it, check out this link Fiddle Just click on the View button within and some Alert messages will appear. The one that says "Should say Object" says it is a string. Not sure if the combinations I mention above are the way to go or what. Just want to get to each piece of the data-bind elements.

UPDATE 2: I know KO has to be doing what I am trying to accomplish, right? So after some digging around in the KO code, I see where it is turning the data-bind string into a usable object (in this case a function.) I am close to getting it to be useful within my own bindings/functions. This does not work 100% yet. But perhaps with someone smarter than me tinkering with it...

This code is within a KO.click event like the self.showLetter above:

var rewrittenBindings = ko.expressionRewriting.preProcessBindings($(event.target).data("bind"), null);
var functionBody = "with($context){with($data||{}){return{" + rewrittenBindings + "}}}";
var almost = new Function("$context", "$element", functionBody);

Answer 1

To access sibling bindings, you need to define a custom binding. Defining such a binding that simply wraps the click binding is pretty simple:

ko.bindingHandlers.clickFlag = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.applyBindingAccessorsToNode(element, {
            click: function() {
                return function(model, event) {
                    valueAccessor().call(this, model, event, allBindings.get('hasFlag'));
                }
            }
        }, bindingContext);
    }
}

http://jsfiddle.net/mbest/9mkw067h/85/

Answer 2

Why not just append it to the click handler?

<button type="button" data-who="Appellant" data-bind="click: function() {showLetter($data,Enum_AppealParties.Appellee);}">View</button>

http://jsfiddle.net/9mkw067h/86/

I agree with the previous posters, though. This should be part of the model.

Answer 3

In this this similar-ish question, which ultimately fizzled out without a good answer:

Knockout how to get data-bind keys and value observables using element?

it became fairly clear the only way to access this info was via parsing the data-bind attribute. Here's an updated version of your fiddle showing how to parse a nested bind statement to get what you need:

http://jsfiddle.net/9mkw067h/83/

This is the code that does the parse:

self.showLetter = function (model, event) {
    var binding_info = {}
    var binding_attr = $(event.target).attr("data-bind")
    var indent = false, indent_key = "";
    $(binding_attr.split(",")).each(
        function(idx, binding) {
            var parts = binding.split(":")
            var key = parts[0].trim()
            var val = parts[1].trim()
            if (val.indexOf("{") != -1) {
                binding_info[key] = {}
                indent = true
                indent_key = key
            }
            if (indent == true) {
                binding_info[indent_key][key] = val.replace("{", "").replace("}", "").trim()
            }
            else {
                binding_info[key] = val
            }
            if (val.indexOf("}") != -1) {
                indent = false
                indent_key = ""
            }
        }
    )    
    console.log(binding_info.hasFlag.flag)
}

At the end of that, binding_info has what you're after.

Update:

The linked question above is slightly different, in that it starts from another view model and a given DOM element, and it says, can I get the bindings for that DOM element? It rules out a custom binding. However, in this instance, custom bindings are already in use, so Michael Best's post below provides a neater answer without custom parsing code and proves my assertion incorrect that custom parsing is the only way to do it!