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

1
votes

I need to get data bind keys and value observable using element.

<select id="selector" data-bind="options:selectOptions,value:selectedValue"></select>

var ViewModel = {
   selectOptions:ko.observableArray([...]),
   selectedValue:ko.observable()
   ...
   some other stuff
   ...
}

In other viewmodel I can access dom element now I need to update element's binding context observable.

how can I get data-bind keys and values?

I need something like this

{
   options:selectOptions,
   value:selectedValue
}
2
javascriptjquerymvvmknockout.jsviewmodel
your goal is quite unclear. Can you explain it? – Muhammad Raheel
If you want this its usually a indicator that you're not doing it the KO way – Anders
@raheelshan I need to access bindingContext observables which are bind to the element. – kongaraju
@KongaRaju Can you explain your goal, instead of trying to simplify it to what you think you need to do? You likely don't need to do what you're asking, as it breaks standard knockout patterns. – xdumaine
@xdumaine Please have a look at updated question – kongaraju

2 Answers

0
votes

ko.dataFor(element) will help. See -

http://knockoutjs.com/documentation/unobtrusive-event-handling.html

In your other view-model where you have the element, call:

var bound_vm = ko.dataFor(element)

bound_vm will then be whatever view-model was bound against that element.

I don't think you can get the key/vals of the original binding; KO has parsed it into functions. Presumably in your other view-model you want to change whatever is bound to options, but you don't know what it is called? You could do something like this with jQuery to parse the original data-bind attribute:

OtherViewModel: {
    the_logic: function() {
        // We have the element already
        var element = [already set to a DOM node]

        // Get the view-model bound to the element
        var bound_vm = ko.dataFor(element)

        // Parse the original binding attribute on the element
        $($(element).attr("data-bind").split(",")).each(
            function(idx, binding) {
                var parts = binding.split(":")
                binding_info[parts[0].trim()] = parts[1].trim()
            }
        )

        // Now binding_info should hold what you want. EG we can set whatever
        // the options binding is bound to like this:
        bound_vm[binding_info[options]]([1,2,3)

    }
}
0
votes

Well i recommend you use this. You can handle it on javascript end using jquery unobtrusive plugin.

http://joel.net/unobtrusive-data-binding-for-knockout-js

For this you can create an object

var binding = {
    options: 'tickets',
    optionsCaption: "'Choose...'",
    optionsText: "'name'",
    value: 'chosenTicket'
}

And use it like this

$('#tickets').dataBind(binding);

Instead of this

<select 
    data-bind="
        options: tickets, 
        optionsCaption: 'Choose...',
        optionsText: 'name',
        value: chosenTicket
    "
></select>

this way you will have the binding object available to reuse and your code will be quite clean. Make sure you call it before applyBinding.