Can I use binding variable for data-format-options

[elgs]

Thanks for the awesome work. The more I use it, the more I love it.

I see from the documentation that data-format-options seems to only take a static value. Is it possible to use a variable as data-format-options?

By the way, it seems data-format-template is mentioned only once in the doc, when you talk about it, did you mean data-format-options?

Also I don't quite understand this statement:

You can also target any binding with the "data-format-target". The value of this is the binding to target so to target data-alt binding, set 'data-format-target="alt"'.

Can you please explain a bit more or an example would be greatly appreciated. I'm sorry if here might not be the most appropriate place to ask questions.

[elgs]

I found a workaround, not sure if there's any better way.

Instead of binding SERVER_NAME to the span, I bind . to the span. So the whole JSON object is passed as value to the formatter:

My data looks like this:

[
    {"SERVER_NAME": "server1", "LAST_WARN": "10"},
    {"SERVER_NAME": "server2", "LAST_WARN": "0"},
    {"SERVER_NAME": "server3", "LAST_WARN": "5"}
]

What I'm hoping is when the LAST_WARN is equal to 0, the server name will be shown in red. My html looks like this:

<span data-format="warnClassFormatter" data-content="."></span>

The formatter is as follows:

$.addTemplateFormatter("warnClassFormatter", function (value, options) {
    if (value.LAST_WARN * 1 > 0) {
        return value.SERVER_NAME;
    } else {
        return '<span style="color:red;">' + value.SERVER_NAME + '</span>';
    }
});

[codepb]

data-format by default targets the content binding. However it may be desirable to target the binding of another attribute (for example you may be setting a class based off a certain parameter). By setting data-format-target="class" then it will target the binding to the class attribute.

[elgs]

Aha! Thanks @codepb, I understand it now.

Can I bind a variable to be part of a value in the dom. For example, in the data {"id": "12345"}. In the dom: <div id="tab_12345"></div>. I'm hoping the div id will have the common prefix tab_, and the rest will be from the data. Is it possible to do this? Thanks.

[elgs]

Based on my understanding on data-format-target, I want to target the id attribute, so I have the following markup:

<div class="tab-pane" data-format="idFormatter" data-format-target="id"
                         data-format-options="tab_" data-content="ID" id="">
</div>

and in Javascript:

$.addTemplateFormatter({
    "idFormatter": function (value, options) {
        console.log('v:', value, 'o:', options);
        return options + value;
    }
});

I'm hoping to generate the following dom:

<div class="tab-pane" id="tab_12345">

if I have the data: {"ID": "12345"}. However, the dom I actually got is like this:

<div class="tab-pane" data-format="idFormatter" data-format-target="id" data-format-options="tab_" id="">12345</div>

Also the console.log is not even run. I guess I misunderstood something.

[elgs]

Aha, I changed the markup as follows, and I get desired result:

<div class="tab-pane" data-format="idFormatter" data-format-target="id"
                         data-format-options="tab_" data-id="ID">
</div>

Beautiful design. Thank you @codepb!