How to provide data-bind as string or javascript object?

Question

I have a "options" binding dropdown that looks like the following:

<select class="form-control" data-bind="options: baseViewModel.filtersViewModel, optionsCaption: 'Choose...', optionsText: function(self) { return self.Name }, value: baseViewModel.baseFilter(), optionsValue: 'Value', event: { change: function() { console.log('test'); applyFilter(baseViewModel.baseFilter()); return true; } }">
    <option value="">Choose...</option>
    <option value="{'sort':[]}">water group</option>
</select>

I am using this binding in various places in my application, is there anyway to declare the entire contents of the data-bind="contents" and pass it in (inject?) as a string or a javascript object? I have examined preprocessing bindings, however, I am not sure if this is what I am looking for.

I would make the component reusable rather than passing parameters as a string . knockoutjs.com/documentation/component-overview.html — Amit Bhoyar
– Amit Bhoyar, Commented Jan 3, 2019 at 22:27
In event that I wanted to pass parameters as a string, and not use a component, would I be able to? — petrosmm
– petrosmm, Commented Jan 4, 2019 at 15:59

Michael Best · Accepted Answer · 2019-01-08 07:47:00Z

1

As you suggested, you can create a custom binding that just has a preprocess method that sets all of the other bindings. For example:

ko.bindingHandlers.filterBinding = {
    preprocess: function(value, name, addBinding) {
        addBinding('options', 'baseViewModel.filtersViewModel');
        addBinding('optionsCaption', '"Choose..."');
        addBinding('optionsText', 'function(self) { return self.Name }');
        // etc.
    }
}

answered Jan 8, 2019 at 7:47

Michael Best

16.7k1 gold badge40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to provide data-bind as string or javascript object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related