Get viewmodel item for a html element

[nevf]

I have the following HTML:

<button class='jqui_btn' id='background_image_fileSelect' data-
bind='click: function(){}'>Choose Background Image</button>
<input data-bind='value: common_items.background_image'
disabled='disabled' />

I have a Widget which adds a <input type="file"/> element. Then when
the button is clicked the standard OS File|Open dialog is opened.
After the user selects a file I need to determine the viewmodel item
associated with the <input> element shown above so I can set it to the
chosen filename.

If have tried various ways the get the viewmodel item without success.
I would have thought that:
var data_bind = input_val.data('bind');
would work, however it returns undefined. input_val is the <input>
element shown above.

Note that there are quite a few of these <input type="file"/> elements
so I need a solution to handle them all in a general way.

Any help appreciated.
---
Neville http://www.surfulater.com

[Andrew Booth]

Hi Neville

http://jsfiddle.net/andybooth/gJw3W/

For markup dynamically inserted via a (jQuery) Widget, which you then want to bind to with KnockoutJs, perhaps you could use ko.applyBindingsToNode directly on the inserted node, using a custom selector to find the inserted <input type=file/> element.

If you are using jQuery Templates, you could get access to the viewModel or item using http://api.jquery.com/tmplitem. This approach is used in the example at http://www.knockmeout.net/2011/05/dragging-dropping-and-sorting-with.html, in that case using jQuery UI sorting.

Hope these ideas are relevant to your scenario.

Andy

$.fn.mediaPicker = function() {
    return this.each(function() {
        $('<input type="file"/>').insertAfter(this);
    });
};
    
var viewModel = {
    file: ko.observable(),
    save: function() {
        alert('File:' + this.file());    
    }
};

ko.applyBindings(viewModel);

var mediaPicker = $('#mediaPicker').mediaPicker();
var mediaPickerNode = mediaPicker.next('input[type=file]').get(0);

ko.applyBindingsToNode(mediaPickerNode, {
    value: viewModel.file
}, viewModel);

[nevf]

Thanks Andy, looks like it may solve my problem. I haven't come across
ko.applyBindingsToNode() before.

My viewmodel has nested arrays of arrays which have the file items, so
it could be tricky doing it this way. That's why I was trying to get
hold of the associated data-bind value from the markup.

It's late for me here in Oz, will try it tomorrow.

Neville

On Jun 17, 8:11 pm, Andrew Booth <andy.booth...@gmail.com> wrote:
> Hi Neville
>
> http://jsfiddle.net/andybooth/gJw3W/
>
> For markup dynamically inserted via a (jQuery) Widget, which you then want
> to bind to with KnockoutJs, perhaps you could use ko.applyBindingsToNode
> directly on the inserted node, using a custom selector to find the inserted
> <input type=file/> element.
>
> If you are using jQuery Templates, you could get access to the viewModel or

> item usinghttp://api.jquery.com/tmplitem. This approach is used in the
> example athttp://www.knockmeout.net/2011/05/dragging-dropping-and-sorting-with....,