Currently, there is no way to reuse a single method of a model and execute different logic based on additional data related to the specific element.
Before the CSP improvements in R1 2023, an unsupported workaround was configuring the method along with the arguments that were evaluated and accessible from the method itself.
Example of the unsupported approach:
<div id="test">
<p data-bind="text: spanLabel('test')" ></p>
<p data-bind="text: spanLabel('another test')"></p>
</div>
<script>
var viewModel = kendo.observable({
spanLabel: function(args){
return "spanLabel executed, args: "+ args
},
});
kendo.bind($("#test"), viewModel);
</script>
Improvement suggestion
Allow the model methods to have access to the reference element. That would enable the internal method logic to get additional data based on the element and achieve the same functionality as the unsupported workaround approach.
Example of the desired functionality:
<div id="test">
<p data-bind="text: spanLabel" data-span-label="test"></p>
<p data-bind="text: spanLabel" data-span-label="another test"></p>
</div>
<script>
var viewModel = kendo.observable({
spanLabel: function(args) {
let element = args.referenceElement;
let spanLabelArgs = element.attr("data-span-label")
return "spanLabel executed, args: " + spanLabelArgs
},
});
kendo.bind($("#test"), viewModel);
</script>
I am using DropDownList in MVVM scenario. Currently, the MVVM supports only external templates. If I try to use the inline template with a simple string in no-data-template it is rendered as expected. However, if there is a special symbol in the template a JavaScript error will be thrown. For example, the following noDataTemplate is throwing an error:
data-no-data-template="some text ."
I would like to have the possibility to use inline templates with special symbols in MVVM scenarios.
Workaround:
I would suggest using a Regex in the parseOptions function in kendo.all.js as demonstrated below:
if (typeof value === 'string') {
var rxIDtest = /^[A-Za-z0-9.:_]/g
if (rxIDtest.test(value) === false && $('#' + value).length) {
value = kendo.template($('#' + value).html());
} else if (source) {
value = kendo.template(source[value]);
}
} else {
value = element.getAttribute(option);
}
Suppose a model is defined with settings for editable, required, validation, etc. Then this model is used a datasource's schema. Instances of the datasource's data will be models. However, if a model is bound to some HTML view, it's settings are not applied to the view. All settings have to be manually applied to the HTML elements. I suggest that these settings are applied automatically. Then for example, a field's property like "required" wouldn't have to be coded at two different places.