Currently it is not possible to nest observables and reuse them without memory leaks. The reason is, that the bound event handlers get never unbound so that the dependencies never get resolved. 

In our opinion the change and get events should be unbound from the nested observable after the unbind of the view model. With more observables which use a nested observable the amount of events is getting bigger and bigger an the outer observables never get collected from the garbage collector.

We think that a method to clean up all handlers like outerObservable.destroy() could help. We also think that the use of nested observables is a common use case and that observables should not only be used for ViewModels. 

If you use a "source" data binding and don't specify a template, it should use the contents of the elements as the template, exactly as it would in knockout.js.

Example:
<div data-bind="source: list">
   <p>
      My name is <span data-bind="text: name"></span> and I am <span data-bind="text: age"></span> years old.
   </p>
</div>

Since the «template» binding is not specified, the contents of this element would become the template used for the binding. So when you render it you get something like this, without having to use an external template:

<div>
   <p>
      My name is Pete and I am 20 years old.
   </p>
   <p>
      My name is Sarah and I am 27 years old.
   </p>
</div>

The point of this is to make it easier to create source binding without having to go through the hassle of using external templates. External templates seem a little overkill when you're doing very simple things with the source binding.

Bug report

When a template is used in MVVM scenario the values of the TreeView model are not updated correctly

Reproduction of the problem

1. Open the Dojo example
2. Select a node (for example 'Location 2')
3. Click on the 'Add New' button - when clicking on the button the value of the 'showAddNewButtonBarcode' property is changed. Thus, the button should become invisible

Current behavior

Although the value of the showAddNewButtonBarcode is changed and 'data-bind="visible:.." is false, the button remains visible

Expected/desired behavior

The binding should work as expected. In this scenario, the button should become invisible.

The issue is a regression introduced with Kendo version 2019.3.917

Related to : #5226
Related commit: - telerik/kendo@ca858c6

Environment

• Kendo UI version: 2021.2.511
• Browser: [all]

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: 

• https://dojo.telerik.com/@pmilchev/UneBafEN 

    <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 think a viewmodel can be binded directly on the DOM element.
For example,

<div kd-controller='viewmodel'>
    <button kd-click="click"></button>
</div>

<script>
    var viewmodel = kendo.observable({
        click: function() {
            alert('I am clicked!');
        }
    })
</script>

Often I have a MVVM model with an enumerable field which is used to populate dropdowns.

I know this data won't change, so I'd like to avoid wrapping into ObservableArray to increase performance, and I name this field, e.g., "_data" (starting with "_" to prevent wrapping).

But kendo throws an error in this case when dropdown's value is changed, 'cause it calls internally "get" method on change, which belongs to Observable.

For now, kendo validator validates just HTML inputs. For simple forms this is ok, but for complex models it would be nice to have a possibility to validate the entire model before posting it (which may not be directly bound to HTML fields!)

The expected scenario looks like Asp.NET mvc validation: validate() method accepts the entire view model and returns an array of error objects which are then bound to HTML labels based on their data-* attributes.

I would like built-in support for nested properties in the model, particularly when binding controls to odata and using the expand option to fetch related data via a foreign key.

If the grid were aware of this, then setting column templates on foreign keyed data could be much easier as would using them to filter rows.  Achieving this today requires a lot of extra code and you can see an example at at http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=880807
 
There are some other suggestions here that are similar but they each suggest something that doesn't quite make it universally useful. However, based on those suggestion it appears that this support would be useful for many things.

You can (sort of) get Object and Array by not defining a type on model field definitions but explicit types would be better to be enforced. Also grids could ignore these types unless a custom editor is provided.

There is also a need for fields that reference submodels and arrays of submodels. HierarchicalDataSources do not really fit the requirement. See how mongoose (for mongoDB) handles documents and subdocuments.

Currently the only way to change settings in data-bind is to 
destory and bind again.

Would be nice to make changes to a existing binding, like data-bind="value: property1" to data-bind="value: property2"
or add/remove dataSource or events.

like you can do with setDataSource on Widgets.

Problem: If you have autoBind, rebind make changes to dataSource,
or you maybe not know about the observables value property on widget creation, but don't want to destroy users work on a widget.

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/enabled

The documentation states that Non-Boolean values, such as 0, null, undefined, and "", are treated as false by the enabled binding.

However, binding to undefined does not disable the element - all other cases are working.

DoJo: https://dojo.telerik.com/iGiZixIM

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);
}