Can I create a custom binding that uses other bindings in knockout.js

Question

I have a custom binding for translations:

ko.bindingHandlers.lang = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        this.lang = [
            'text1':'text1 translated'
            ,'text2':'text2 translated'
        ];
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var keyword = valueAccessor();
        var translatedString = this.lang[keyword];
        $(element).text(translatedString );
    }
};

Which I use like this:

<span data-bind="lang:'text1'"></span>

However, I also have a binding for creating a table row formating:

ko.bindingHandlers.tableRow = {
    update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).html("<td>" + valueAccessor()[0] + "</td><td>" + valueAccessor()[1] + "</td>");
    }
}

Which I use like this:

<tr data-bind="tableRow:['text1','text2']"></tr>

To the question:

Now I would like to combine these bindings so I could call my tableRow binding like this:

<tr data-bind="tableRow:[lang:'text1','text2']"></tr>

The code above is ofcourse only for example, in reality there's more going on in these bindings.

I have read through the documentation multiple times and spent a long time searching for a solution but couldn't find anything. Maybe because this can't be done?

score 9 · Accepted Answer · edited May 23 '17 at 12:10

9

All you need to do is relay or modify the values from one bindingHandler to the other ones you want to activate.

So, in your tablerow handler, call init and update (in their respective functions):

ko.bindingHandlers.lang.init(element, valueAccessor, allBindingsAccessor, viewModel)

Modify the parameters as needed of course. It's likely you'll grab one of the values from your array and pass it as the second parameter to init and update.

This is a great way to activate other standard built in bindings as well.

Update: Adding the comment from @Joche just to make this more readable:

var value = valueAccessor(); 
var newValueAccessor = function() {
    return translatedString; }; 
ko.bindingHandlers.lang.init(element, newValueAccessor,
       allBindingsAccessor, viewModel);

edited May 23 '17 at 12:10

Community

1
1

answered Feb 13 '13 at 11:55

WiredPrairie

58,954
17
116
143

That seems pretty nice. However, I can't figure out how to change the value in the valueAccessor before sending it upwards. I imagine my lang binding shouldn't update the element but instead update the valueAccessor and then call ko.bindingHandlers.lang.init(element, valueAccessor, allBindingsAccessor, viewModel) – Joche Feb 13 '13 at 13:26
1

This is how to modify the valueAccessor(): var value = valueAccessor(); var newValueAccessor = function() { return translatedString; }; ko.bindingHandlers.text.update(element, newValueAccessor, allBindingsAccessor, viewModel); – Joche Feb 13 '13 at 14:24
@WiredPrairie Are you saying that you call one binding handler from the other binding handler? – Paul Manzotti Feb 14 '13 at 11:48
Yes, you can. There are quite a few examples of that pattern in more advanced bindingHandlers. – WiredPrairie Feb 14 '13 at 11:50

Paul Manzotti · Answer 2 · 2013-02-13T10:14:16.923

Can you not just make your translation a normal function, and then call it from your table row binding?

var translate = function(text)
{
        this.lang = [
            'text1':'text1 translated'
            ,'text2':'text2 translated'
        ];
    },
        var translatedString = this.lang[text];
        return translatedString;
    }
};

You could then pass in an extra parameter to the tableRow method to indicate whether you want translation or not:

You could then call this in your table row binding function:

ko.bindingHandlers.tableRow = {
    update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var text1 = valueAccessor()[2] ? translate(valueAccessor()[0]) : valueAccessor()[0];
        var text2 = valueAccessor()[2] ? translate(valueAccessor()[1]) : valueAccessor()[1];
        $(element).html("<td>" + text1 + "</td><td>" + text2 + "</td>");
    }
}

Then you can call it directly from bound elements:

<span data-bind="text: translate(text1())"></span>

Yes, that's how I do it now. But it's not very modular. I have one binding tableRow and one tableRowTranslated just because I don't always want a translated string. I was hoping for a set of bindings that could be combined together. — Joche, Feb 13 '13 at 09:50
I don't think it is possible, but I've updated the answer with another possible solution. — Paul Manzotti, Feb 13 '13 at 10:14
That's a better approach, I'll use your updated answer. Thanks! — Joche, Feb 13 '13 at 10:30

Can I create a custom binding that uses other bindings in knockout.js

To the question:

2 Answers2

Linked