DataSource unable to create new object and return POST message to server

[Elia]

I am attempting to create a login user interface using a combination of templates, SPA and MVVM tools. When the button is clicked, it should add the username and password to the account session (DataSource) and send a POST request to the URL specified. However, nothing happens when accountSession.sync() is executed. Have I missed something out?


Javascript Module:

define(['jquery', 'kendo', 'Helpers/TemplateLoader'], function ($, kendo, loader)
    {

        var viewModel = null;
        var accountSession = null;

        var init = function ()
        {
            //Create the View.
            loader.loadTemplate("login");
            var template = kendo.template($("#login").html())({});
            $("#adbrain").html(template);

            //Create the DataSource.
            accountSession = new kendo.data.DataSource(
                {
                    transport: {
                        read: {
                            url: "/accountSession"
                        },

                        create: {
                            url: "/accountSession",
                            type: "POST"
                        }
                    }
                }
            )

            //Create the ViewModel.
            viewModel = kendo.observable(
                {
                    username:
                    {
                        value: "",
                        enabled: true
                    },
                    password:
                    {
                        value: "",
                        enabled: true
                    },
                    button:
                    {
                        enabled: true
                    },
                    error: "",
                    doSubmit: function (event)
                    {
                        //Prevent the default action.
                        event.preventDefault();

                        //Clear the error.
                        this.set("error", "");

                        //Disable all controls.
                        this.set("username.enabled", false);
                        this.set("password.enabled", false);
                        this.set("button.enabled", false);

                        //Animate the Adbrain logo.
                        $("#login_loading_stable").addClass("hidden");
                        $("#login_loading").removeClass("hidden");

                        accountSession.add({UserName: this.username.value, Password: this.password.value});
                        accountSession.sync();
                    }
                }
            );

            //Bind View and ViewModel together.
            kendo.bind($("#login_form"), viewModel);
        }

        var doLogin = function ()
        {
            alert("login");
        }

        return {
            init: init,
            doLogin: doLogin
        }
    }
)

Corresponding HTML template (the code is loaded successfully into the SPA):

<script type="x-kendo-template" id="login" class="template">
    <form id="login_form"  data-bind="events: { submit: doSubmit }">
      <div class="group">
          <img id="login_loading_stable" src="../../Images/login-logo.png" />
          <img id="login_loading" class="hidden" src="../../Images/a-loader.gif" />
        <div class="entity">
          <div class="cell label">
            <label for="username_input">Username</label>
           </div>
          <div class="cell field">
            <input id="username_input" name="UserName" type="text" data-bind="enabled: username.enabled, value: username.value" />
          </div>
        </div>
        <div class="entity">
          <div class="cell label">
            <label for="password_input">Password</label>
           </div>
          <div class="cell field">
            <input id="password_input" name="Password" type="password" data-bind="enabled: password.enabled, value: password.value" />
          </div>
        </div>
        <input id="login_button" type="submit" data-bind="enabled: button.enabled" value="Login"/>
      </div>
        <p id="error_message" class="error" data-bind="text: error"></p>
    </form>
</script>

[Atanas Korchev]

Hi Elia,

 You need to set the schema.model option of your data source in order to use transport.create. More info can be found in the documentation.

Regards,
Atanas Korchev
the Telerik team