MVVM binding to controller method

[Jerry]

Hi,

I'm trying out MVVM binding on HTML for the first time and have come across a scenario which i cant find any examples of.

What i'm trying to do is bind a lot of controls on my view to the viewmodel so (like silverlight) if a control changes value, i can check the viewmodel has changed and raise a haschanges or a similar event. - and i think this is possible using the MVVM model.

I currently had the drop down control bind to the controller like so:

@(Html.Kendo().ComboBox()
                .Name("BusinessUnitComboBox")
                .Filter("contains")
                .Placeholder("Select Business Unit...")
                .DataSource(src =>
                {
                    src.Read(read =>
                    {
                        read.Action("GetBusinessUnits", "Home", new { CompanyId = ViewBag.CompanyId });
                    });
                })
                .DataTextField("Name")
                .DataValueField("BusinessUnitId")
                .Suggest(true)
                .HtmlAttributes(new { style = "width: 250px" })
                .Events(e => e.Change("BusinessUnitChanged"))

How would i be able to call this method using the MVVM way?

Currently i have:

<select data-role="combobox" data-text-field="Name" data-value-field="BusinessUnitId" data-bind="source: buSource, value: BusinessUnitComboBox"></select>

as the html and after reading a guide, i have the following as my script:

var viewModel = kendo.observable({
            buSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/Products",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                        return options;
                    }
                },
                batch: true,
            }),
            BusinessUnitComboBox: null,
            hasChanges: false,
            save: function () {
                this.productsSource.sync();
                this.set("hasChanges", false);
            }
        });

Would someone be able to guide me or point me in the right direction on  how to bind to the controller as i've done using the kendo control itself and also how to use the parameterMap?



Thanks in advance.

[Petur Subev]

Hello Jerry,

The datasource configuration remains the same as in all the demos that we shared, the difference is that its declaration is inside the viewmodel.

We also have a demo that demonstrates how to initialize the DropDownList via MVVM. The demos is available here:

http://demos.kendoui.com/web/dropdownlist/mvvm.html

Kind Regards,
Petur Subev
Telerik