Changed values of collection not reflected in backbone.js - backbone.js-collections

When i click on submit button i can't see the changes made to collection although on every click of checkbox change event is fired
//Model
Wine = Backbone.Model.extend({
// Toggle the `IsSelected` state of this todo item.
toggle: function () {
debugger;
this.save({
IsSelected: !this.get('IsSelected')
});
}
});
//Collection
WineCollection = Backbone.Collection.extend({
model: Wine,
url: "http://localhost/Industries/data/data.json"
});
//This is a list view collection and individual List item and here we bind the click event of checkbox and in Submit button here we check the the changed values
WineListView = Backbone.View.extend({
el: $('#wineList'),
initialize: function () {
alert($('#divBtnSubmit'));
wineList.bind("reset", this.render, this);
},
render: function () {
wineList.each(function (wine) {
$(this.el).append(new WineListItemView({ model: wine }).render().el);
}, this);
return this;
}
});
//Submit button
WinedivBtnSubmit = Backbone.View.extend({
el: $('#divBtnSubmit'),
initialize: function () {
this.render();
},
render: function () {
// Load the compiled HTML into the Backbone "el"
var template = _.template($("#save-div").html(), {});
this.$el.append(template);
},
events: {
"click #divBtnSubmit1": "saveWine"
},
saveWine: function () {
debugger;
wineList.each(function (wine) {
alert(wine.get('ID') + '<<>>' + wine.get('IsSelected'));
});
return false;
// alert(this.modelmodels);
}
});
//Indiviual list item
WineListItemView = Backbone.View.extend({
tagName: "li",
template: _.template($('#wine-list-item').html()),
initialize: function () {
},
events:
{
'click .toggle': 'toggleVisible'
},
toggleVisible: function () {
this.model.toggle();
},
render: function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes: {
"": "list",
"wines/:id": "wineDetails"
},
initialize: function () {
},
list: function () {
// this.wineList = new WineCollection();
this.wineListView = new WineListView();
this.btn = new WinedivBtnSubmit();
// wineList.fetch();
},
wineDetails: function (id) {
this.wine = this.wineList.get(id);
this.wineView = new WineView({ model: this.wine });
this.wineView.render();
}
});
wineList = new WineCollection();
wineList.fetch();
// on every click of checkbox this event is fired
wineList.bind("change", function () {
alert('list changed');
});
var app = new AppRouter();
Backbone.history.start();

Related

Extend control with HBox container and inherited but customized event

The idea is to have a HBox container under the MultiComboBox control to which selected tokens will be pushed. I have followed different tutorials and couldn't get a success. A multiComboBox is simply now shown.
The idea:
Simplified (testing) implementation of custom control:
sap.ui.define([
'sap/m/MultiComboBox',
'sap/m/HBox'
], function (MultiComboBox, HBox) {
'use strict';
/**
* Constructor for a new MultiCombobox with tokens.
*/
return MultiComboBox.extend('drex.control.DropDownWithTags', {
metadata: {
aggregations: {
_tokensContainer: { type: 'sap.m.HBox', multiple: false }
},
},
init: function () {
MultiComboBox.prototype.init.apply(this, arguments);
this.setAggregation('_tokensContainer', new HBox());
},
_addToken: function () {
this.getAggregation('_tokensContainer').insertItem({text: 'test'});
},
_handleSelectionLiveChange: function(oControlEvent) {
this._addToken();
MultiComboBox.prototype._handleSelectionLiveChange.apply(this, arguments);
},
renderer: function (rm, DropDownWithTags) {
rm.write('<div');
rm.writeControlData(DropDownWithTags);
rm.write('>');
rm.renderControl(DropDownWithTags.getAggregation('_tokensContainer'));
rm.write('</div>');
}
});
});
XML (no change, except for a name, could that be a problem?). Adding HBox aggregation to it does not help.
<drex:DropDownWithTags
items="{
path: 'diseaseList>/allDiseases'
}"
selectedKeys="{filterModel>/disease}"
selectionFinish="onSelectDisease">
<core:Item key="{diseaseList>id}" text="{diseaseList>Name}"/>
</drex:DropDownWithTags>
Any idea why it happens ? I cannot see my mistake.
there are many ways to do this. here is one way
sap.ui.define([
'sap/ui/core/Control',
'sap/ui/core/Item',
'sap/m/MultiComboBox',
'sap/m/HBox',
'sap/m/Text'
], function (Control, Item, MultiComboBox, HBox, Text) {
Control.extend('DropDownWithTags', {
metadata: {
aggregations: {
combo: { type: 'sap.m.MultiComboBox', multiple: false },
_hbox: { type: 'sap.m.HBox', multiple: false }
},
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.setAggregation('_hbox', new HBox({
items: [
]
}));
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.write('>');
rm.write('<div>');
rm.renderControl(oControl.getAggregation('combo'));
rm.write('</div>');
rm.write('<div>');
rm.renderControl(oControl.getAggregation('_hbox'));
rm.write('</div>');
rm.write('</div>');
},
onAfterRendering: function() {
var combo = this.getAggregation('combo')
var hbox = this.getAggregation('_hbox');
combo.attachEvent("selectionChange", function() {
hbox.destroyItems();
var text = this.getSelectedItems().map(function(item) {
return item.getText();
});
if (text.length > 0) {
hbox.addItem(new Text({ text: text.join(",")}))
}
})
}
});
var combo = new DropDownWithTags({
combo: new MultiComboBox({
items: [
new Item({
key: "test",
text: "test"
}),
new Item({
key: "test1",
text: "test1"
})
]
})
});
combo.placeAt("content")
});

How to test $ionicPopup.show

I have an ionicPopup like so:
function editNotifications() {
var popUp = $ionicPopup.show({
template: '<ion-checkbox ng-repeat="item in vm.notifications" ng-model="item.notification" ng-checked="item.notification">' +
'<span class="notificationsFont">{{item.settingsText}}</span></ion-checkbox>',
title: 'Notification Settings',
scope: $scope,
buttons: [
{
text: 'Cancel',
onTap: function(e) {
vm.notifications = localStorageManager.get('notificationStatus');
}
},
{
text: '<b>Ok</b>',
type: 'button-positive',
onTap: function(e) {
localStorageManager.set('notificationStatus', vm.notifications);
vm.notificationText = "Notifications off";
setNotificationValuesBasedOnUserInput(vm.notifications);
}
}]
});
};
Here is what I have so far;
it('Should edit notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(true);
})
spyOn(localStorageManager, 'set');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.set).toHaveBeenCalled();
// expect(localStorageManager.set).toHaveBeenCalledWith('notificationStatus');
});
I basically have no idea how to test this thing. There doesn't seem to be much on the internet. I would think I need to do something in my callFake function but I'm a bit stuck. Anyone ever successfully tested this beast before?
Go through this answer: https://stackoverflow.com/a/52565500/7943457
And modify your code something like this:
function editNotifications() {
var popUp = $ionicPopup.show({
template: '<ion-checkbox ng-repeat="item in vm.notifications" ng-model="item.notification" ng-checked="item.notification">' +
'<span class="notificationsFont">{{item.settingsText}}</span></ion-checkbox>',
title: 'Notification Settings',
scope: $scope,
buttons: [
{
text: 'Cancel',
onTap: function(e) {
return false;
}
},
{
text: '<b>Ok</b>',
type: 'button-positive',
onTap: function(e) {
return true;
}
}]
});
popup.then(function(response){
if(response){ //when response is true
localStorageManager.set('notificationStatus', vm.notifications);
vm.notificationText = "Notifications off";
setNotificationValuesBasedOnUserInput(vm.notifications);
}else{ //when response is false
vm.notifications = localStorageManager.get('notificationStatus');
}
})
};
You can test it like this:
it('Should edit notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(true);
})
spyOn(localStorageManager, 'set');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.set).toHaveBeenCalled();
// expect(localStorageManager.set).toHaveBeenCalledWith('notificationStatus');
});
it('Should get notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(false);
})
spyOn(localStorageManager, 'get');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.get).toHaveBeenCalled();
// expect(localStorageManager.get).toHaveBeenCalledWith('notificationStatus');
});
Hope it helps.

How to pass selected Value form Popup to normal controller page in ionic framework

How to pass selected Value form Popup to normal controller page in ionic framework
`$scope.showprofpopup = function()
{
$scope.data = {}
var myPopup = $ionicPopup.show
({
templateUrl: 'templates/popover.html',
title: 'Please Choose Category',
scope: $scope,
buttons: [ { text : 'Cancel' }, { text: 'Select', type: 'button-dark', onTap: function(e) { return $scope.data; } }, ]
});
myPopup.then(function(res)
{
//$scope.create(res.category);
//$state.go('app.userdetails');
//$scope.contactMessage = { text: res };
if(!res.category)
{
$ionicLoading.show({ template: '<ion-spinner icon="android"></ion-spinner>', animation: 'fade-in', showBackdrop: true, maxWidth: 100,showDelay: 50 });
$scope.showprofpopup();
$timeout(function () { $ionicLoading.hide(); }, 3000);
//$ionicPopup.alert({ title: "Please Choose Category" });
}
else
{
$scope.SelectedProfessional = { text: res.category};
//alert(res.category);
$state.go('app.userdetails');
}
});
};`
I want to send the result re.category to app.userdetails page.kindly anyone help me.
using $stateParams
$state.go('app.userdetails',{'category': res.category});

How to access the object passed along with the event object in the fireBuy() method?

<script>
sap.ui.core.Control.extend("com.controls.MyButton", {
metadata: {
aggregations: {
buyButton : { type: "sap.ui.commons.Button", multiple: false}
},
events: {
buy: {enablePreventDefault: true}
}
},
init: function() {
var oControl = this;
//create a button to allow used buying that book
var oBuyBtn = new sap.ui.commons.Button({
text: "Click Me",
press: function (oEvent) {
oControl.fireBuy({
someData : "some data I want to pass along with the event object"
});
}
});
this.setAggregation("buyButton", oBuyBtn);
},
renderer: {
render: function(oRm, oControl) {
oRm.renderControl(oControl.getAggregation("buyButton"));
}
}
});
var oButton = new com.controls.MyButton({
buy: function(oEvent) {
alert(oEvent.someData);
}
});
oButton.placeAt("content");
</script>
The code is shown above. I want to get the someData property in the change callback function, How can I possibly achieve that? I tried oEvent.someData, but I got undefined alert. The code is from nabisoft website, but there has no explanation on how to access the object passed by the fireBuy method.
var oButton = new com.controls.MyButton({
buy: function(oEvent) {
alert(oEvent.getParameter("someData"));
}
});
oEvent.getParamter("someData") solves this!

Modal open with angualrjs route

Hey I am working with bootstrap modal and calling it in angularjs. Its working good. Only the problem is that how can I route modal in angularjs routing. My Code:
Inside Controller
var modalInstance = $modal.open({
templateUrl: 'webpages/home/loginModal.html'
});
modalInstance.result.then(function () {
}, function () {
});
Inside Routing
.when('/login', {
templateUrl: function($routeParams) {
return 'sitepages/home/home.html';
},
controller: 'PageViewController',
reloadOnSearch: false
})
Its just example of routing how I am doing it, I need to find routing for modal.
You can use states for this purposes
$stateProvider.state("items.add", {
url: "/add",
onEnter: ['$stateParams', '$state', '$modal', '$resource', function($stateParams, $state, $modal, $resource) {
$modal.open({
templateUrl: "items/add",
resolve: {
item: function() { new Item(123).get(); }
},
controller: ['$scope', 'item', function($scope, item) {
$scope.dismiss = function() {
$scope.$dismiss();
};
$scope.save = function() {
item.update().then(function() {
$scope.$close(true);
});
};
}]
}).result.then(function(result) {
if (result) {
return $state.transitionTo("items");
}
});
}]
});
More details: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state
You don't need the routing for it
app.controller("ACtrl", ['$scope','$http', '$log', '$modal',
function($scope, http, $log, $modal){
$scope.OpenModel = function () {
var param = { appId: 1, price: 2.5 };
var modalInstance = $modal.open({
size: 'lg',
backdrop: 'static',
templateUrl: 'webpages/home/loginModal.html',
controller: 'modalCtrl',
resolve: {
data: function () { return param; }
}
});
modalInstance.result.then(function (response) {
//Do whatever you want to do with reponse
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}
///Add your modal control here
app.controller("modalCtrl", ['$scope','$http', '$modalInstance', 'data',
function($scope, http, $modalInstance, data){
// rest of the code goes here
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
}