I use VS extension for AppBuilder and try to do following:
My View (report.html file) here:
<div data-role="view" id="view-all-tasks" data-layout="default" class="activities-view" data-model="app.pointTasksService.viewModel">
<ul id="point-tasks-listview" data-type="group" data-style="inset" data-role="listview"
data-template="pointTaskTemplate" data-header-template="pointTaskHeaderTemplate"
data-bind="source: pointTasksDataSource" data-fixed-headers="true"></ul>
</div>
<!-- Task group template -->
<script type="text/x-kendo-template" id="pointTaskHeaderTemplate">
<span style="color:blue">${value}</span>
</script>
<!-- Tasks ListView Template -->
<script type="text/x-kendo-template" id="pointTaskTemplate">
<button id="show-dls-btn" data-bind="events: { click: reportSelect }"> Тест </button>
//here are items from DataSource (display correctly)
</script>
My ViewModel here:
var app = app || {};
app.PointTasks = (function () {
'use strict'
// pointTasks model
var pointTasksViewModel = kendo.data.ObservableObject.extend({
pointTasksDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource = new kendo.data.DataSource({
schema: {
model: {
Id: 'Id',
fields: {
///here contains fields
}
},
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: myServiceURI,
dataType: "json",
});
}
},
group: "FormattedDate()",
sort: { field: 'FormattedDate()', dir: 'desc' }
});
that.pointTasksDataSource = dataSource;
},
reportSelect: function () {
alert('Thats work fine!');
}
});
app.pointTasksService = {
viewModel: new pointTasksViewModel(),
logout: function () {
app.helper.logout();
}
};
}());
When I click on button (id="show-dls-btn") in ListView the error appears:
"Uncaught TypeError: undefined is not a function from 'http://local/simulator/kendo/js/kendo.mobile.min.js:12"
P.S.: If I move button out of template, event fires and all works fine.
My View (report.html file) here:
<div data-role="view" id="view-all-tasks" data-layout="default" class="activities-view" data-model="app.pointTasksService.viewModel">
<ul id="point-tasks-listview" data-type="group" data-style="inset" data-role="listview"
data-template="pointTaskTemplate" data-header-template="pointTaskHeaderTemplate"
data-bind="source: pointTasksDataSource" data-fixed-headers="true"></ul>
</div>
<!-- Task group template -->
<script type="text/x-kendo-template" id="pointTaskHeaderTemplate">
<span style="color:blue">${value}</span>
</script>
<!-- Tasks ListView Template -->
<script type="text/x-kendo-template" id="pointTaskTemplate">
<button id="show-dls-btn" data-bind="events: { click: reportSelect }"> Тест </button>
//here are items from DataSource (display correctly)
</script>
My ViewModel here:
var app = app || {};
app.PointTasks = (function () {
'use strict'
// pointTasks model
var pointTasksViewModel = kendo.data.ObservableObject.extend({
pointTasksDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource = new kendo.data.DataSource({
schema: {
model: {
Id: 'Id',
fields: {
///here contains fields
}
},
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: myServiceURI,
dataType: "json",
});
}
},
group: "FormattedDate()",
sort: { field: 'FormattedDate()', dir: 'desc' }
});
that.pointTasksDataSource = dataSource;
},
reportSelect: function () {
alert('Thats work fine!');
}
});
app.pointTasksService = {
viewModel: new pointTasksViewModel(),
logout: function () {
app.helper.logout();
}
};
}());
When I click on button (id="show-dls-btn") in ListView the error appears:
"Uncaught TypeError: undefined is not a function from 'http://local/simulator/kendo/js/kendo.mobile.min.js:12"
P.S.: If I move button out of template, event fires and all works fine.