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