CODEWITHSUNDEEP
javascriptknockout.js
Poul K. Sørensen
Poul K. Sørensen

Reputation: 17560

Knockout add my own data-bind attribute like With

Sorry for my bad title, but I am not really sure what to call this and properly someone can guide me in the correct direction.

I am working in Typescript and class KnockoutFileDropArea.

What I then would like to do is something like the following:

<div data-bind="with:fileDropArea">
    <div data-bind="foreach:files">
    </div>
</div>

The KnockoutFileDropArea has the property files ect.

Above is straight forward. Just adding a property on my viewmodel of KnockoutFileDropArea ect. But what I need to do is when it binds my KnockoutFileDropArea i want to do something with the HtmlElement that it was bound for.

What can I do to attach something to the element when my KnockoutFileDropArea is bound?

Would it be better to create a new (cant remember what they are called, 'BindingHandler'), like with. So it was something like <div data-bind="droparea: fileDropArea">.

Upvotes: 0

Views: 74

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

A good choice would be to create a custom binding.

Your custom binding could either just perform the functionality that you want on the element and run when the element is bound and you could use it with the with binding.

ko.bindingHandlers.test = {
    init: function(element, valueAccessor, allBindings, data, context) {
        //do something with the element
    }
}

Otherwise, your custom binding could wrap the with binding like:

ko.bindingHandlers.test = {
    init: function(element, valueAccessor, allBindings, data, context) {
        //do something with the element

        return ko.bindingHandlers["with"].init.apply(this, arguments);
    },
    update: function(element, valueAccessor, allBindings, data, context) {

        return ko.bindingHandlers["with"].update.apply(this, arguments);
   }
};

Update: In KO 3.1, the with binding no longer has an update function, as it can now use a computed in the init for that purpose. So, the update function above could be removed.

Note: the with is quoted, as older IE does not like using with as a property name.

Upvotes: 1

Related Questions