I am new to knockout and I have no idea why I am getting this message.
Unable to process binding "simpleGrid: function (){return gridViewModel }"
Message: gridViewModel is not defined;
library_customization.js
define(['services/logger'], function (logger) {
var title = 'Library Customization';
var vm = {
activate: activate,
title: title
};
return vm;
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var PagedGridModel = function (items) {
this.items = ko.observableArray(items);
this.addItem = function () {
this.items.push({ name: "New item", sales: 0, price: 100 });
};
this.sortByName = function () {
this.items.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function () {
this.gridViewModel.currentPageIndex(0);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
};
ko.applyBindings(new PagedGridModel(initialData));
function activate() {
logger.log(title + ' selected', null, title, true);
return true;
}
});
library_customization.html
<!DOCTYPE html>
<html id="libraryCust">
<head>
<title> Project</title>
<script type="text/javascript" src="../../Scripts/knockout-3.3.0.js
</script>
</head>
<body>
<section>
<h2 class="page-title" data-bind="text: title"></h2>
</section>
<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>
</html>
Check the fiddle: JS Fiddle
I think the main problem is that you exit your module earlier than planned in the code below:
var title = 'Library Customization';
var vm = {
activate: activate,
title: title
};
return vm;
/* your main code follows below but never executes */
So I moved these properties into the PagedGridModel constructor.
Related
I am just trying to filter or search for the relavent data using the input from the dropdown . the requirement is select an option in the dropdown and click on the button it should filter or populate the respective data into the table using angular. i tried i am able to do it directly but not with the click event . Please help me to find out the solution for this as i am kind of new to angular. Here is my code:
My Html:
Filter:
<select ng-model="filterItem.store" ng-options="item.name for item in filterOptions.stores">
</select>
<button >search</button>
<table>
<tr>
<th>Name</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr ng-repeat="item in data | filter:customFilter">
<td ng-click="">
{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.rating}}</td>
</tr>
</table>
JS File:
$scope.customFilter = function (data) {
if (data.rating === $scope.filterItem.store.rating) {
return true;
} else if ($scope.filterItem.store.rating === 6) {
return true;
} else {
return false;
}
};
//The data that is shown
$scope.data = [
{
name: "product1",
price: 198,
rating: 1
},
{
name: "product2",
price: 200,
rating: 5
},
{
name: "product3",
price: 200,
rating: 2
},
{
name: "product4",
price: 10,
rating: 3
},
{
name: "product5",
price: 200,
rating: 3
},
{
name: "product6",
price: 400,
rating: 5
}
Pluker:
http://plnkr.co/edit/RhJic3KYE0Lc42FJ2lOx?p=preview
You can move the logic to a function and call the function on button ng-click,
$scope.filter = function(){
$scope.filtereddata = [];
angular.forEach($scope.data,function(key,value){
if(key.rating === $scope.filterItem.store.rating)
$scope.filtereddata.push(key);
})
}
HTML
<button ng-click="filter()">search</button>
and ng-repeat should be based on the filtered data,
<li data-ng-repeat="item in filtereddata | orderBy:'price':reverse ">
Name: {{item.name}} Price: {{item.price}} Rating: {{item.rating}}
</li>
DEMO
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
//Contains the filter options
$scope.filterOptions = {
stores: [
{id : 2, name : 'Show All', rating: 6 },
{id : 3, name : 'Rating 5', rating: 5 },
{id : 4, name : 'Rating 4', rating: 4 },
{id : 5, name : 'Rating 3', rating: 3 },
{id : 6, name : 'Rating 2', rating: 2 },
{id : 7, name : 'Rating 1', rating: 1 }
]
};
//Contains the sorting options
$scope.sortOptions = {
stores: [
{id : 1, name : 'Price Highest to Lowest' },
{id : 2, name : 'Price Lowest to Highest' },
]
};
//Mapped to the model to filter
$scope.filterItem = {
store: $scope.filterOptions.stores[0]
}
//Mapped to the model to sort
$scope.sortItem = {
store: $scope.sortOptions.stores[0]
};
//Watch the sorting model - when it changes, change the
//ordering of the sort (descending / ascending)
$scope.$watch('sortItem', function () {
console.log($scope.sortItem);
if ($scope.sortItem.store.id === 1) {
$scope.reverse = true;
} else {
$scope.reverse = false;
}
}, true);
$scope.filter = function(){
$scope.filtereddata = [];
angular.forEach($scope.data,function(key,value){
if(key.rating === $scope.filterItem.store.rating)
$scope.filtereddata.push(key);
})
}
//The data that is shown
$scope.data = [
{
name: "product1",
price: 198,
rating: 1
},
{
name: "product2",
price: 200,
rating: 5
},
{
name: "product3",
price: 200,
rating: 2
},
{
name: "product4",
price: 10,
rating: 3
},
{
name: "product5",
price: 200,
rating: 3
},
{
name: "product6",
price: 400,
rating: 5
}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Filter:
<select ng-model="filterItem.store" ng-options="item.name for item in filterOptions.stores">
</select>
<button ng-click="filter()">search</button>
Sort:
<select ng-model="sortItem.store" ng-options="item.name for item in sortOptions.stores">
</select>
<p>
<strong>Selected Filter dropdown item: </strong> {{filterItem.store.name}}
</p>
<p>
<strong>Selected Sort dropdown item: </strong> {{sortItem.store.name}}
</p>
<ul>
<!-- We are getting the data first, filtering the data and then sorting the data based
on the select options -->
<li data-ng-repeat="item in filtereddata | orderBy:'price':reverse ">
Name: {{item.name}} Price: {{item.price}} Rating: {{item.rating}}
</li>
</ul>
<table>
<tr>
<th>Name</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr ng-repeat="item in data | filter:customFilter">
<td ng-click="">
{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.rating}}</td>
</tr>
</table>
</body>
</html>
I want to do a progress bar when user scrolls down. When it's down all the way, the bar is 100% width.
http://codepen.io/hawkphil/pen/vOyPwN
HTML
Ionic List Directive
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
</div>
<h1 class="title">Ionic Delete/Option Buttons</h1>
<div class="buttons">
<button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
Reorder
</button>
</div>
<!--div class="progress" ng-style='{"width": pos.x}'></div-->
<div class="progress" ng-style='getXObj()'></div>
</ion-header-bar>
<ion-content on-scroll="isScrolling()">
<!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}" class="item-remove-animate">
Item {{ item.id }}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)">
</ion-delete-button>
<ion-option-button class="button-assertive"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="share(item)">
Share
</ion-option-button>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
JS
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicScrollDelegate) {
$scope.data = {
showDelete: false
};
$scope.edit = function(item) {
alert('Edit Item: ' + item.id);
};
$scope.share = function(item) {
alert('Share Item: ' + item.id);
};
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
$scope.onItemDelete = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
$scope.items = [
{ id: 0 },
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 },
{ id: 11 },
{ id: 12 },
{ id: 13 },
{ id: 14 },
{ id: 15 },
{ id: 16 },
{ id: 17 },
{ id: 18 },
{ id: 19 },
{ id: 20 },
{ id: 21 },
{ id: 22 },
{ id: 23 },
{ id: 24 },
{ id: 25 },
{ id: 26 },
{ id: 27 },
{ id: 28 },
{ id: 29 },
{ id: 30 },
{ id: 31 },
{ id: 32 },
{ id: 33 },
{ id: 34 },
{ id: 35 },
{ id: 36 },
{ id: 37 },
{ id: 38 },
{ id: 39 },
{ id: 40 },
{ id: 41 },
{ id: 42 },
{ id: 43 },
{ id: 44 },
{ id: 45 },
{ id: 46 },
{ id: 47 },
{ id: 48 },
{ id: 49 },
{ id: 50 }
];
$scope.pos = {x:'21.41982072480742%', xObj: {}};
$scope.isScrolling = function() {
console.log($ionicScrollDelegate.getScrollPosition());
$scope.pos.x = ($ionicScrollDelegate.getScrollPosition().top / 2204 * 100) + '%';
console.log($scope.pos.x);
//$scope.getXObj();
}
$scope.getXObj = function() {
console.log({"width": $scope.pos.x});
return {"width": $scope.pos.x + "%"};
}
});
CSS
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.progress {
height: 2px;
background: red;
}
I have tried two things:
ng-style='{"width": pos.x}'
and
ng-style='getXObj()'
But didn't bind to provide the red bar expanding while I scroll down.
I have read this question:
Angular.js ng-style won't bind value
I am running out of idea why although the console is showing the right percentage value.
Any clue why this doesn't work?
Seems like a possible ionic bug. It appears to call the function alright on the scroll event of the element but does not call digest cycle to update DOM.
Snippet from ionic:
var scrollFunc = function(e) {
var detail = (e.originalEvent || e).detail || {};
$scope.$onScroll && $scope.$onScroll({ //<-- Here it gets called but it is outside of angular context
event: e,
scrollTop: detail.scrollTop || 0,
scrollLeft: detail.scrollLeft || 0
});
};
$element.on('scroll', scrollFunc); //event registration
So as a possible fix you could do a scope.$evalAsync which would be probably safer option.
$scope.isScrolling = function() {
$scope.pos.x = ($ionicScrollDelegate.getScrollPosition().top / 2204 * 100) + '%';
$scope.$evalAsync(angular.noop);
}
Demo
I have two observablearrays in my ViewModel:
ShortlistedCountries
CompanyMainList
All companies names are displayed in a dropdown box. And the shortlisted companies are listed underneath it.
I would like to achieve two things from this demo.
Firstly, the users should be able to select the company name from the dropdown and add it to the Shortlisted company list.
Secondly, the users should get an error message (or alert) if they try to shortlist a company that has already been added to the shortlisted companies list.
Please have a look at my demo in JSFiddle
HTML
<div>
<div>All Companies</div>
<div>
<div id="rdoCompanyServer">
<select data-bind="options:CompanyMainList, optionsText:'CompanyName', optionsValue:'id', optionsCaption: 'Select a company...'"></select> Add to Shortlist
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div>
<div id="sectionHeading">My Shortlisted Companies</div>
<div>
<div>
<ol data-bind="foreach: ShortlistedCountries">
<li><span data-bind="text:CompanyName"></span><span id="removeshortlist">
Remove</span>
</li>
</ol>
<br />
</div>
</div>
</div>
Knockout JS
function CompanyViewModel() {
var self = this;
self.currentDemoLicenses = ko.pureComputed(function () {
return self.demoLicenses().length;
});
/* adding bookmark servers in the same view TEST */
self.bookmarkedServerCount = ko.pureComputed(function () {
return self.ShortlistedCountries().length;
});
self.ShortlistedCountries = ko.observableArray([{
CompanyName: 'Apple Inc',
id: 11
}, {
CompanyName: 'TDK',
id: 15
}, {
CompanyName: 'Samsung',
id: 16
}
]);
self.DeleteShortlistedCountries = function (ShortlistedCountries) {
self.ShortlistedCountries.remove(ShortlistedCountries);
};
self.AddToShortlistedCountries = function () {
self.ShortlistedCountries.push(self.ShortlistedCountries);
};
self.CompanyMainList = ko.observableArray([{
CompanyName: 'Acer',
id: 1
}, {
CompanyName: 'Toshiba',
id: 12
}, {
CompanyName: 'Sony',
id: 13
}, {
CompanyName: 'LG',
id: 14
}, {
CompanyName: 'HP',
id: 6
}, {
CompanyName: 'Hitachi',
id: 6
}, {
CompanyName: 'Apple Inc',
id: 11
}, {
CompanyName: 'TDK',
id: 15
}, {
CompanyName: 'Samsung',
id: 16
}, {
CompanyName: 'Panasonic',
id: 7
}]);
};
$(document).ready(function () {
ko.applyBindings(new CompanyViewModel());
});
Have a look at my demo in JSFiddle
Please let me know if I am missing some thing or is there anything wrong with my code.
Thank you.
Kind regards.
Sid
Try something like this
ViewModel:
function CompanyViewModel() {
var self = this;
self.selectedCompany = ko.observable();//has dropdown selection
self.ShortlistedCompanies = ko.observableArray([{
CompanyName: 'Apple Inc',
id: 11
}, {
CompanyName: 'TDK',
id: 15
}, {
CompanyName: 'Samsung',
id: 16
}
]);
var isExists = function (data) { //function checks for duplicates
var status = false;
ko.utils.arrayFirst(self.ShortlistedCompanies(), function (item) {
if (item.id === data.id) {
status = true;
return status;
}
});
return status;
}
self.DeleteShortlistedCompanies = function (ShortlistedCompanies) {
self.ShortlistedCompanies.remove(ShortlistedCompanies);
};
self.AddToShortlistedCompanies = function () {
if (!self.selectedCompany()) {
alert('select something');
return;
}
if (isExists(self.selectedCompany())) {
alert('Cannot add duplicates');
return;
}
self.ShortlistedCompanies.push(self.selectedCompany());
};
self.CompanyMainList = ko.observableArray([{
CompanyName: 'Acer',
id: 1
}, {
CompanyName: 'Toshiba',
id: 12
}, {
CompanyName: 'Sony',
id: 13
}, {
CompanyName: 'LG',
id: 14
}, {
CompanyName: 'HP',
id: 6
}, {
CompanyName: 'Hitachi',
id: 6
}, {
CompanyName: 'Apple Inc',
id: 11
}, {
CompanyName: 'TDK',
id: 15
}, {
CompanyName: 'Samsung',
id: 16
}, {
CompanyName: 'Panasonic',
id: 7
}]);
};
View :
<div id="rdoCompanyServer">
<select data-bind="options:CompanyMainList, optionsText:'CompanyName', optionsCaption: 'Select a company...',value:selectedCompany"></select> Add to Shortlist
</div>
For reference working fiddle here
Just started with ReactJS and I'm looking for the most efficient code to display the array below in a table structure as described in the 'render' section. I have been using .map to iterate through the users/buttons objects, but with no success yet.
In my code sample below, I want to take the userData array and display the content in separate rows (html table format)ie.
Joe,Smith,[Click 1A],[Click2B] //'Click XX' are buttons
Mary,Murphy,[Click 2A],[Click2B]
How can I achieve this?
Thanks
var MyButton = require('./mybutton.js');
var userData =[{
userButtons: [
[{user: [{ id: 1, lastName: 'Smith', firstName: 'Joe',
buttons: [
{button:[{ id:0, value: "Click 1A" enabled:1}]},
{button:[{ id:1, value: "Click 1B" enabled:1}]}
]
}]}],
[{user: [{ id: 1, lastName: 'Murphy', firstName: 'Mary',
buttons: [
{button:[{ id:0, value: "Click 2A" enabled:1}]},
{button:[{ id:1, value: "Click 2B" enabled:1}]}
]
}]
}]
]}];
var DisplayData = React.createClass({
render: function() {
// render userButtons in a table with data using <MyButton> ie.
// <table>
// <tr><td>Joe</td><td>Smith</td><td>[Click 1A]</td><td>[Click 2A]</td</tr>
// <tr><td>Mary</td><td>Murphy</td><td>[Click 2B]</td><td>[Click 2B]</td></tr>
// </table>
}
}
});
React.render(
<DisplayData tArr = {userData} />
, document.getElementById('content')
);
// mybutton.js
var React = require('react');
module.exports = React.createClass({
render: function() {
return (
<button>{this.props.value}</button>
)
}
});
I would suggest you simplify your userData if possible.. you have quite a bit of extra nested arrays that don't seem to be needed.
Something like this:
var userButtons = [
{
id: 1,
lastName: 'Smith',
firstName: 'Joe',
buttons: [
{
id: 0,
value: "Click 1A",
enabled: 1
}, {
id: 1,
value: "Click 1B",
enabled: 1
}
]
},
{
id: 2,
lastName: 'Murphy',
firstName: 'Mary',
buttons: [
{
id: 0,
value: "Click 2A",
enabled: 1
}, {
id: 1,
value: "Click 2B",
enabled: 1
}
]
}
];
Then it's easy to loop through and return the right elements:
return (
<table>
{
userButtons.map(function(ub) {
var buttons = ub.buttons.map(function(button) {
return (
<td>{button.value}</td>
)
});
return (
<tr>
<td>{ub.firstName}</td>
<td>{ub.lastName}</td>
{buttons}
</tr>
)
})
}
</table>
)
Something like the following might work:
handleClick: function(id, value) {
// do something
},
render: function() {
var rows = userData.userButtons.map(
function(u) {
var buttons = u.buttons.map(
function(b) {
return <Button onClick={function() { this.handleClick(b.id, b.value)}.bind(this);}
enabled={b.enabled===1}>
{b.value}
</Button>;
});
return <tr>
<td>{u.firstName}</td>
<td>{u.lastName}</td>
{buttons}
</tr>;
});
return <table>{rows}</table>;
}
Where I assume you can get Button from something like react-bootstrap.
I'm trying to chenge the css class of a li tag when I click on it.
I have this:
Model:
var businessUnitsModel = {
businessUnitsList: ko.observableArray([
{ siteID: "a", title: "business1" },
{ siteID: "b", title: "business2" },
{ siteID: "c", title: "business3" },
{ siteID: "d", title: "business4" }]),
currentSelected: ko.observable(),
selectItem: function (site) { this.currentSelected(site.siteID); }
}
//overall viewModel
var viewModel = {
businessUnits: businessUnitsModel,
};
HTML
<ul class="modal-list" data-bind="'foreach': businessUnits.businessUnitsList">
<li class="filterItem" data-bind="'text': title,
css: { 'filterItemSelect': siteID === $parent.currentSelected },
'click': $parent.selectItem">
</li>
</ul>
CSS
.filterItemSelect {
color:#0069ab;
}
and I can't understand why it is not working.
This is what you are looking for :
JS:
var businessUnitsModel = {
businessUnitsList: ko.observableArray([{
siteID: "a",
title: "business1"
}, {
siteID: "b",
title: "business2"
}, {
siteID: "c",
title: "business3"
}, {
siteID: "d",
title: "business4"
}]),
currentSelected: ko.observable(),
selectItem: function (that, site) {
that.currentSelected(site.siteID);
}
}
//overall viewModel
var viewModel = {
businessUnits: businessUnitsModel,
};
ko.applyBindings(viewModel);
View :
<div data-bind="with :businessUnits">
<ul class="modal-list" data-bind="'foreach': businessUnitsList">
<li class="filterItem" data-bind="'text': title,
css: { 'filterItemSelect': siteID === $parent.currentSelected() },
'click': function(){$parent.selectItem($parent, $data);}"></li>
</ul>
</div>
See fiddle
I hope it helps.
You should use currentSelected function value (i.e. add parentheses) when applying css:
<ul class="modal-list" data-bind="foreach: businessUnitsList">
<li class="filterItem" data-bind="text: title,
css: { 'filterItemSelect': siteID === $parent.currentSelected() },
click: $parent.selectItem">
</li>
</ul>
And script:
var businessUnitsModel = function() {
var self = this;
self.businessUnitsList = ko.observableArray([
{ siteID: "a", title: "business1" },
{ siteID: "b", title: "business2" },
{ siteID: "c", title: "business3" },
{ siteID: "d", title: "business4" }]);
self.currentSelected = ko.observable();
self.selectItem = function (site) {
self.currentSelected(site.siteID);
}
}
ko.applyBindings(new businessUnitsModel());
Fiddle
UPDATE here is update of your markup and view model. You should provide full path to currentSelected() property:
<ul class="modal-list" data-bind="'foreach': businessUnits.businessUnitsList">
<li class="filterItem" data-bind="'text': title,
css: { 'filterItemSelect':
siteID === $parent.businessUnits.currentSelected() },
'click': $parent.businessUnits.selectItem">
</li>
</ul>
And here is fixed problem with model - inside selectItem function this was equal to item which you clicked. Thus you don't want to use self alias to model, you need to specify its name:
var businessUnitsModel = {
businessUnitsList: ko.observableArray([
{ siteID: "a", title: "business1" },
{ siteID: "b", title: "business2" },
{ siteID: "c", title: "business3" },
{ siteID: "d", title: "business4" }]),
currentSelected: ko.observable(),
selectItem: function (site) {
businessUnitsModel.currentSelected(site.siteID);
}
}
//overall viewModel
var viewModel = {
businessUnits: businessUnitsModel,
};
ko.applyBindings(viewModel);
Fiddle