I'm converting your mvvm pattern template to use angular instead (or trying to anyway).
I get the data , but the binding is showing [object Object]. It's obviously nesting the data further in, but how do I get to it.
In the mvvm examples, we used $(field_name). I'm trying to use {{ field_name }} or {{ dataItem.field_name }} and I get that same output. I get the right amount of rows, but they are just the object.
Here is how I am requesting the data (which works as far as getting the data):
$scope.listDataSource = new kendo.data.DataSource({
type: "jsdo",
serverPaging: true,
serverFiltering: true,
filter: { field: "cust_no", operator: "eq", value: "abc" },
serverSorting: true,
sort: { field: "connect_type", dir: "asc" },
transport: {
jsdo: jsdoSettings.resourceName,
tableRef: "ttCustomerConnection",
countFnName: "Count"
},
schema: {
model: {
fields: {
id: { type: "string" },
seq: { type: "number" },
cust_no: { type: "string" },
connect_type: { type: "string" },
connect_type_desc: { type: "string" },
ip_address: { type: "string" },
user_name: { type: "string" },
password: { type: "string" },
server_name: { type: "string" },
VPN_required: { type: "Boolean" },
notes: { type: "string" },
change_userid: { type: "string" },
change_date: { type: "date" },
change_time: { type: "string" }
}
}
},
error: function(e) {
// removed for brevity
}
} );
And here is the html:
<kendo-mobile-view id="list" k-title="'List View'" k-layout="'default'" k-on-before-show="OnBeforeShow()" ng-controller="ListController">
<kendo-mobile-list-view id="conList" class="item-list" k-data-source="listDataSource">
<h3 class="item-title">{{ dataItem.cust_no }}</h3>
<p class="item-info">{{ dataItem.ip_address }}</p>
</kendo-mobile-list-view>
</kendo-mobile-view>
Anybody able to help with this one?
Hello,
It might help to see what the data assigned to the DataSource looks like.
To see the data, you can do $scope.listDataSource.data(); from the JavaScript Console or the debugger at a breakpoint.
Is the Business Entity using a multi-table DataSet? (tableRef is only required if you are using a multi-table DataSet.)
When using type: "jsdo", the model for the DataSource is set automatically based on the information in the catalog.
I wonder if your program would behave differently if you comment out the schema property.
I hope this helps.
I saw that the tableRef wasn't required for my single table data set, but figured that it couldn't hurt. I removed it for giggles and it reacted the same (of course).
I did the call to get the data and got this with the first record expanded:
I was curious about the schema as well, which is why I tried it before posting the question in the first place. No go, I get the same results.
Thanks
It was my fault.
I added a wrapper div to the html and used k-template and it works.
<kendo-mobile-view id="list" k-title="'List View!'" k-layout="'default'" k-on-before-show="OnBeforeShow()" ng-controller="ListController">
<kendo-mobile-list-view id="conList" class="item-list" k-data-source="listDataSource">
<div k-template>
<h3 class="item-title">{{ dataItem.cust_no }}</h3>
<p class="item-info">{{ dataItem.ip_address }}</p>
</div>
</kendo-mobile-list-view>
</kendo-mobile-view>
With that, I am getting my data.
My app.js entry-point:
It wasn't working originally with my template defined in the index page due to the fact that I had my factory for the templates (like shown in the sushi app) wrong. I looked more closely at that and got it working the original way:
var app = angular.module('ListMobileApp', [ 'kendo.directives' ]);
app.run(["$rootScope", function($rootScope) {
$rootScope.initialView = "views/home.html"
}])
app.factory('templates', function() {
return {
conTemplate: $("#conTemplate").html()
};
});
Template definition in the index.html:
<script id="conTemplate" type="text/x-kendo-templ">
<h3 class="item-title">{{ dataItem.cust_no }}</h3>
<p class="item-info">{{ dataItem.ip_address }}</p>
</script>
And the use of the template in my list view (back to how I had it in the original post):
<kendo-mobile-view id="list" k-title="'List View!'" k-layout="'default'" k-on-before-show="OnBeforeShow()" ng-controller="ListController">
<kendo-mobile-list-view id="conList" class="item-list" k-template="templates.conTemplate" k-data-source="listDataSource">
</kendo-mobile-list-view>
</kendo-mobile-view>
And the missing piece was passing the templates into the controller for the list:
app.controller("ListController", ['$rootScope', '$scope', 'templates', function($rootScope, $scope, templates) {
$scope.templates = templates;
Oh, didn't need the schema definition (glad because it was a lot of extra work and I only added it because I thought I might need it to do the mapping).
Great!
Thank you for sharing your findings.
Btw: there is now angular 2.0. "removed from Angular: $scope": eisenbergeffect.bluespire.com/all-about-angular-2-0 and chariotsolutions.com/.../ng-conf-2015-misko-heverys-angular-2-0-keynote-syntax-approach
No idea if this has importance for you, but it could be wortwhile to check out why it was removed. ;-)
--
Kind regards,
Stefan Houtzager
Houtzager ICT consultancy & development
www.linkedin.com/in/stefanhoutzager