Page Grid live example not working! Why? Code Included
132 views
Skip to first unread message
Ihear Yah
Jul 17, 2015, 12:07:13 PM7/17/15
to knock...@googlegroups.com
Okay I'm just trying to duplicate the Grid Page live example locally. The select box is fine. It populates from the AllRawJson.js file. I downloaded the JSFiddle and added Knockout 3.2 and knockout simpleGrid.js files. Can anyone Help?
Thx
Henry
Here's my Error Message...
Uncaught ReferenceError: Unable to process binding "value: function (){return id }"
Message: id is not defined
VM65:1 Uncaught ReferenceError: id is not defined
HTM/Javascript....
<!DOCTYPE html>
<html>
<head>
<title>Page Grid</title>
<script type="text/javascript" src="knockout-3.2.0.js"></script>
<script type="text/javascript" src="knockout.simpleGrid.3.0.js"></script>
<script>
function titleMoney() {
var rev1 = this;
// titleMoney = function() {
;
for (var i = 0; i < rev1.revenue().length; i++) {
if (rev1.revenue()[i].songTitle() === selectedSongTitle) {
//page Grid here
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Account Name", rowText: rev1.revenue()[i].accountName() },
{ headerText: "Amount", rowText: rev1.revenue()[i].amount() },
{ headerText: " Date", rowText: rev1.revenue()[i].date() },
],
pageSize: 4
});
} //for next
} //function end
</script>
</head>
<body>
<!--ul data-bind="foreach: title">
<li data-bind="click: $parent.selectPerson, text: songTitle"></li>
</ul-->
<!-- ko if: selectedPerson -->
<span data-bind="text: selectedPerson().songTitle"></span>
<!-- /ko -->
<td><select data-bind="options: title,
optionsText: 'songTitle',
value: id,
optionsCaption:'--Select Title--'">,
value: selectedSongTitle
</select>
</td>
</tr>
<button data-bind='click: titleMoney'>Get My Money!</button>
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel'> </div>
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
Jump to first page
</button>
</div>
</body>
<script type="text/javascript" src="AllRawJson.js"></script>
</html>
AllRawJson.js
function titleModel() {
var self = this;
self.title = [
{ songTitle: "This Shit is Working", copyrightNumber: "SR 48395", copyrightDate: "01-20-1999", songType: "Jazz", lyrics: "Paid Me My Money"},
{ songTitle: "Muir Woods Suite", copyrightNumber: "SR 48395", copyrightDate: "01-20-1999", songType: "Jazz", lyrics: "Paid Me My Money"},
{ songTitle: "Willa and HenP", copyrightNumber: "PA 2899", copyrightDate: "01-20-1999", songType: "Classical", lyrics: "Erika Believes in Me"},
{ songTitle: "Its All About Erika", copyrightNumber: "SR 20098", copyrightDate: "01-20-1999", songType: "Funk", lyrics: "Meta is the Way"}
];
self.selectedPerson = ko.observable();
self.selectPerson = function() {
// this = the object in people corresponding to the name we clicked on
self.selectedPerson(this);
};
}
ko.applyBindings(new titleModel());
function revenueModel() {
var self = this;
self.revenue = [
{ songTitle: "This Shit is Working", accountName: "ASCAP", amount: 443.66, date: "01-20-1999"},
{ songTitle: "Wila and Henp", accountName: "NBC TV", amount: 284233.90, date: "10-23-2000"},
{ songTitle: "This Shit is Working", accountName: "ASCAP", amount: 443.66, date: "01-20-1999"},
{ songTitle: "Wila and Henp", accountName: "NBC TV", amount: 284233.90, date: "10-23-2000"},
{ songTitle: "This Shit is Working", accountName: "ASCAP", amount: 443.66, date: "01-20-1999"},
{ songTitle: "Wila and Henp", accountName: "NBC TV", amount: 284233.90, date: "10-23-2000"},
{ songTitle: "Its All About Erika", accountName: "Harry Fox", amount: 29668, date: "02-20-2003"}
];
self.selectedPerson = ko.observable();
self.selectPerson = function() {
// this = the object in people corresponding to the name we clicked on
self.selectedPerson(this);
};
}
ko.applyBindings(new revenueModel());
rolly hernando
Jul 18, 2015, 2:35:50 AM7/18/15
to knock...@googlegroups.com
Add the id in your title observable array.
--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Ihear Yah
Jul 18, 2015, 10:25:10 AM7/18/15
to knockoutjs
thx!
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/EggBbQFCk4E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.
Ihear Yah
Jul 19, 2015, 7:03:46 PM7/19/15
to knock...@googlegroups.com
Okay I added the id field ...still getting the same error massage?
Gunnar Liljas
Jul 19, 2015, 8:09:40 PM7/19/15
to knock...@googlegroups.com
1. The HTML isn't balanced. TR:s and TD:s without a table etc.
2. The first script (titleMoney) isn't balanced. Too many semi colons, not enough curly braces
3. You don't have an id property on the titles (mentioned)
4. You apply two different viewmodels.
rolly hernando
Jul 20, 2015, 5:22:00 AM7/20/15
to knock...@googlegroups.com
It should be like this
Youraaray=[{id:0,Name:'',desc:''}]...Can i see your array
Ihear Yah
Jul 20, 2015, 10:12:43 PM7/20/15
to knockoutjs
Sure. okay id isn't a string
function titleModel() {
var self = this;
self.title = [
{ id: "1", songTitle: "This Shit is Working", copyrightNumber: "SR 48395", copyrightDate: "01-20-1999", songType: "Jazz", lyrics: "Paid Me My Money"},
{ id: "2", songTitle: "Muir Woods Suite", copyrightNumber: "SR 48395", copyrightDate: "01-20-1999", songType: "Jazz", lyrics: "Paid Me My Money"},
{ id: "3", songTitle: "Willa and HenP", copyrightNumber: "PA 2899", copyrightDate: "01-20-1999", songType: "Classical", lyrics: "Erika Believes in Me"},
{ id: "4", songTitle: "Its All About Erika", copyrightNumber: "SR 20098", copyrightDate: "01-20-1999", songType: "Funk", lyrics: "Meta is the Way"}
];
self.selectedPerson = ko.observable();
self.selectPerson = function() {
// this = the object in people corresponding to the name we clicked on
self.selectedPerson(this);
};
}
ko.applyBindings(new titleModel());
function revenueModel() {
var self = this;
self.revenue = [
{ id: "1", songTitle: "This Shit is Working", accountName: "ASCAP", amount: 443.66, date: "01-20-1999"},
{ id: "2", songTitle: "Wila and Henp", accountName: "NBC TV", amount: 284233.90, date: "10-23-2000"},
{ id: "3", songTitle: "This Shit is Working", accountName: "ASCAP", amount: 443.66, date: "01-20-1999"},
{ id: "4", songTitle: "Wila and Henp", accountName: "NBC TV", amount: 284233.90, date: "10-23-2000"},
{ id: "5", songTitle: "This Shit is Working", accountName: "ASCAP", amount: 443.66, date: "01-20-1999"},
{ id: "6", songTitle: "Wila and Henp", accountName: "NBC TV", amount: 284233.90, date: "10-23-2000"},
{ id: "7", songTitle: "Its All About Erika", accountName: "Harry Fox", amount: 29668, date: "02-20-2003"}
];
self.selectedPerson = ko.observable();
self.selectPerson = function() {
// this = the object in people corresponding to the name we clicked on
self.selectedPerson(this);
};
}
ko.applyBindings(new revenueModel());
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Grid</title>
<script type="text/javascript" src="knockout-3.2.0.js"></script>
<script type="text/javascript" src="knockout.simpleGrid.3.0.js"></script>
<script>
function titleMoney() {
var rev1 = this;
// titleMoney = function() {
var totalPerfromance = 0 ;
var totalPrint = 0;
for (var i = 0; i < rev1.revenue().length; i++) {
if (rev1.revenue()[i].songTitle() === selectedSongTitle) {
// print row here
//page Grid here
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Account Name", rowText: rev1.revenue()[i].accountName() },
{ headerText: "Amount", rowText: rev1.revenue()[i].amount() },
{ headerText: " Date", rowText: rev1.revenue()[i].date() },
],
pageSize: 7
});
// If (rev1.revenue()[i].songType()==='performance') {
// totalPerformance =+ rev1.revenue()[i].amount();
// }
// If (rev1.revenue()[i].songType()==='print') {
// totalPrint =+ rev1.revenue()[i].amount();
// }
} //if end
<script type="text/javascript" src="ihearyahAllRawJson.js"></script>
</html>
Ihear Yah
Jul 21, 2015, 8:19:07 PM7/21/15
to KnockoutJS
1.
2. just don't have a clue about the balancing. thought JS Fiddle was accurate...Hummm do you have an example?
3. Okay I added the id property on both title and revenue array (id: 0...)
4. Lost here.... So you can't access two models at one time?
Syntax is killing me any suggestions?
Thx
Henry
ie
self.title = [
{ id: 0, songTitle: "This Shit is Working", copyrightNumber: "SR 48395", copyrightDate: "01-20-1999", songType: "Jazz", lyrics: "Paid Me My Money"},
{ id: 1, songTitle: "Muir Woods Suite", copyrightNumber: "SR 48395", copyrightDate: "01-20-1999", songType: "Jazz", lyrics: "Paid Me My Money"},
{ id: 2, songTitle: "Willa and HenP", copyrightNumber: "PA 2899", copyrightDate: "01-20-1999", songType: "Classical", lyrics: "Erika Believes in Me"},
{ id: 3, songTitle: "Its All About Erika", copyrightNumber: "SR 20098", copyrightDate: "01-20-1999", songType: "Funk", lyrics: "Meta is the Way"}
];
Gunnar Liljas
Jul 22, 2015, 9:45:02 AM7/22/15
to knock...@googlegroups.com
Ihear Yah
Jul 22, 2015, 12:22:23 PM7/22/15
to knockoutjs
Thx's ..U have set me on a path of success. I've always helped others achieve their goals. I promise to study this code. My plan is the teach kids Knockout.js.. I'll keep U informed of my progress.
Sincerely,
Henry
--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/EggBbQFCk4E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.
Gunnar Liljas
Jul 22, 2015, 2:32:00 PM7/22/15
to knock...@googlegroups.com
Ihear Yah
Jul 23, 2015, 12:07:28 AM7/23/15
to knockoutjs
My knowledge of the DOM is very weak. It will be the 1st thing I teach my students. However, I just uploaded the code to the browser and got this error.. I know I'm close.
Uncaught TypeError: Cannot read property 'nodeType' of null
Code
<!DOCTYPE html>
<html>
<head>
<title>Page Grid</title>
<script type="text/javascript" src="knockout-3.2.0.js"></script>
<script type="text/javascript" src="knockout.simpleGrid.3.0.js"></script>
<script>
function viewModel() {
var self = this;
self.titles = [{
songTitle: "This Shit is Working",
copyrightNumber: "SR 48395",
copyrightDate: "01-20-1999",
songType: "Jazz",
lyrics: "Paid Me My Money"
}, {
songTitle: "Muir Woods Suite",
copyrightNumber: "SR 48395",
copyrightDate: "01-20-1999",
songType: "Jazz",
lyrics: "Paid Me My Money"
}, {
songTitle: "Willa and HenP",
copyrightNumber: "PA 2899",
copyrightDate: "01-20-1999",
songType: "Classical",
lyrics: "Erika Believes in Me"
}, {
songTitle: "Its All About Erika",
copyrightNumber: "SR 20098",
copyrightDate: "01-20-1999",
songType: "Funk",
lyrics: "Meta is the Way"
}];
self.revenues = [{
songTitle: "This Shit is Working",
accountName: "ASCAP",
amount: 443.66,
date: "01-20-1999"
}, {
songTitle: "Wila and Henp",
accountName: "NBC TV",
amount: 284233.90,
date: "10-23-2000"
}, {
songTitle: "This Shit is Working",
accountName: "ASCAP",
amount: 443.66,
date: "01-20-1999"
}, {
songTitle: "Wila and Henp",
accountName: "NBC TV",
amount: 284233.90,
date: "10-23-2000"
}, {
songTitle: "This Shit is Working",
accountName: "ASCAP",
amount: 443.66,
date: "01-20-1999"
}, {
songTitle: "Wila and Henp",
accountName: "NBC TV",
amount: 284233.90,
date: "10-23-2000"
}, {
songTitle: "Its All About Erika",
accountName: "Harry Fox",
amount: 29668,
date: "02-20-2003"
}];
self.selectedSong = ko.observable();
self.filteredRevenues = ko.computed(function () {
if (!self.selectedSong()) {
return [];
}
return ko.utils.arrayFilter(self.revenues, function (revenue) {
return revenue.songTitle == self.selectedSong().songTitle;
});
});
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.filteredRevenues,
columns: [{
headerText: "Account Name",
rowText: "accountName"
}, {
headerText: "Amount",
rowText: 'amount'
}, {
headerText: "Date",
rowText: 'date'
}],
pageSize: 4
});
}
ko.applyBindings(new viewModel());
</script>
<!-- ko if: selectedSong -->
<span data-bind="text: selectedSong().songTitle"></span>
<!-- /ko -->
<select data-bind="options: titles, optionsText: 'songTitle', optionsCaption:'--Select Title--',value: selectedSong"></select>
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel'></div>
</div>
</body>
<!--script type="text/javascript" src="ihearyahAllRawJson.js"></script-->
<!--script type="text/javascript" src="IhearyahRoutines2.js"></script-->
</html>
Reply all
Reply to author
Forward
0 new messages