Kendo UI +要求不执行数据单击

Question

I am pretty new to require so trying to get a good level of structure going with my kendo mobile app.

I have the following:

app.js

define(["jQuery", "kendo", "app/views/home", "app/views/login"], function ($, kendo, homeView, loginView) {
  var _kendoApplication;

  return {
    init: function () {
      _kendoApplication = new kendo.mobile.Application(document.body, {
        transition: "slide"
      });
    },
    views: {
      home: homeView,
      login: loginView
    }
  }
});

Main.js

require.config({
    paths: {
        jQuery: "libs/jquery.min",
        kendo: "libs/kendo.mobile.min"
    },
    shim: {
        jQuery: {
            exports: "jQuery"
        },
        kendo: {
            deps: ["jQuery"],
            exports: "kendo"
        }
    }
});


var app;

require(["app/app"], function (application) {
    app = application;
    app.init();
});

login.js

define(['kendo'], function () {
    return {
        init: function (initEvt) {
            alert('init login');
        },

        beforeShow: function (beforeShowEvt) {
            // ... before show event code ...
        },

        show: function (showEvt) {
            // ... show event code ...
        },
        viewModel: kendo.observable({
            message: "This rocks!",
            userLogin: function (e) {
                //  alert($('#loginUserName').val());
                alert('dsds');
            }
        })
    }
});

index.html

<!-- Login View -->
<div data-role="view" id="login-view" data-layout="child" data-title="Login"
data-init="app.views.login.init"
data-before-show="app.views.login.beforeShow"
data-show="app.views.login.show">

  <ul data-role="listview" data-style="inset" data-type="group" id="activities-listview">
    <li>
      Login
      <ul>
        <li>
          <label>
            Username: 
            <span id="fooBar">
              <input type="text" id="loginUserName" value="">
            </span>
          </label>
        </li>
        <li>
          <label>
            Password: 
            <span id="fooBar">
              <input type="text" id="loginUserPassword" value="">
            </span>
          </label>
        </li>
      </ul>
    </li>
  </ul>
  <h1 data-bind="text: message">
  </h1>
  <ul data-role="listview" id="listItemFinish">
    <li data-icon="add">
      <a data-role="button" data-click="app.views.login.userLogin" data-icon="arrow-e">
        Finish
      </a>
    </li>
  </ul>
</div>

Now, I am trying to call the userLogin via data-bind="events:{click: app.views.login.userLogin}" but getting the following error:

Uncaught TypeError: Object [object Object] has no method 'apply'

I can confirm data-binding is working as I am able to bind the message variable.

Am I doing something wrong?

Answer 1

Manager to solve this. Issue was indeed lack of understanding. For those of you interested, to call the data-bind click event, all I had to do was the following:

Login.js

define(['kendo', 'app/utils/utils'], function (kendo, utils) {
return {
    init: function (initEvt) {
       alert('init login');
                 alert(utils.getCredits());
    },

    beforeShow: function (beforeShowEvt) {
        // ... before show event code ...
    },

    show: function (showEvt) {
        // ... show event code ...
    },
            viewModel: kendo.observable({
                        message: "This rocks!",
                            userLogin: function (e) {
                                alert($('#loginUserName').val());

                            }
                    })
            }

});

Index.html

<li data-icon="add"><a data-role="button" data-bind="click: userLogin" data-icon="arrow-e">Finish</a>

I was attempting to call via app.Views.Login.userLogin.