CODEWITHSUNDEEP
javascriptkendo-ui
dmathisen
dmathisen

Reputation: 2342

Kendo binding attribute with string and variable

Is it possible to do something like:

<span data-bind="attr: { id: 'nav-' + id }"></span>

I use the 'id' in a few places in the html, so I need to prefix them, but this throws an 'unexpected string' error. Is there any way to do something like this or do I have to apply the prefix in the view model?

Upvotes: 2

Views: 2269

Answers (1)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

You can't concatenate strings within a data-bind definition. You need to apply it in the view model, e.g. by using a function in the view model:

var prefix = "nav-";

var viewModel = kendo.observable({
    id: "postfix",
    getId: function() {
        return prefix + this.get("id");
    }
});

Then use it like this:

<span data-bind="attr: { id: getId }"> using method in the view model </span>

Or you register custom bindings like this:

var prefix = "nav-";
kendo.data.binders.customId = kendo.data.Binder.extend({
    refresh: function () {
        var value = this.bindings["customId"].get();
        value = prefix + value;

        $(this.element).attr("id", value);

    }
});

Then use it like this:

<span data-bind="customId: id">using custom binding</span>

Working examples: http://jsfiddle.net/lhoeppner/CEaXr/

Upvotes: 4

Related Questions