I am trying to make a treeview control in angular js.
I have used the angular js directive( referred this link : angularjs treeview)
I have modified the above for having a big tree that contain tags.
My fiddle : fiddle sample
//angular module
var myApp = angular.module('myApp', ['angularTreeview']);
//test controller
myApp.controller('myController', function($scope){
$scope.clean_tree = function()
{
$scope.roleList = [];
};
$scope.show_tree = function () {
//debugger;
console.log("tag start : " + new Date());
//$scope.tagList = eval(abc);
$scope.roleList = $scope.roleList_tag;
$scope.$apply();
console.log("tag end : " + new Date());
};
The problem
The rendering of the tree gets slower and slower if I continuously follow this pattern:
click on : Tree Structure
click on : clean
Go To 1.
I dont understand why this is becoming slower and slower when i follow this pattern
Related
I have a chart generator plugin built with AngularJS and d3js, I want to load some charts based on a priority ranking, for example:
There are 6 charts with 3 priority levels:
First priority: chart #1 & chart #5
Second priority: chart #3
Third priority: chart #2, chart #4 & chart #6
Note that you can't view a Second priority level chart before all of the first Priority charts have completely loaded.
How can I use lazy loading with my scope?
Here is my code:
Controller
ngCharts.controller('WgListMixed', function ($rootScope, $scope, $http, $sce, $timeout, $compile, SharedDateScopes) {
SharedDateScopes.getWidgetMixed(2).then(function(data_promised) {
$rootScope.wgMixLists = data_promised;
angular.forEach($rootScope.wgMixLists, function(widget) {
var scope_name = widget.wg_id;
var scope_name_v = widget.wg_id+"_v";
$rootScope[scope_name] = widget.data[0];
$rootScope[scope_name_v] = widget.data;
});
});
});
Serivce
ngCharts.service('SharedDateScopes', function($rootScope, $http, $q) {
return {
getWidgetMixed: function(dateRanges,stages) {
var dataRange = <%=$data_range%>;
if(typeof dateRanges !=="undefined") {
var dataRange = dateRanges;
}
var date_range_attr = "&date_range="+dataRange+"";
if (typeof codename == "undefined") {
var date_range_attr = "";
}
var defer = $q.defer();
$http.get('<%=[byt_control_root]%>/byt_reporting_widgets_manager?stage=mixed'+date_range_attr+'&widgets=<%=$bayt_mixed_widget%>').success(function (datas) {
defer.resolve(datas);
});
return defer.promise;
}
};
});
Well this isn't as much a lazy loading problem as it is a timing problem.
Imagine you maintain a list for each level.
var firstPriority = [ {ID : 1, loaded : false} , {ID : 5, loaded : false} ] ;
you start loading the data for 1 and 5 with promises of course. When each one finishes loading you change the flag in the array and then check the array to see if all elements in the array are now set to true. If they are then you start loading the next level, then the next.
This should do it and work for however many levels you have.
In my angularjs app, i define a var for put a "prefix" in my all console.log
var app = angular.module('app', ['ngRoute', 'ngCookies', 'LocalStorageModule', 'ngResource', 'pascalprecht.translate']).run(function($rootScope, $timeout) {
$rootScope.defineCLC = "[ZR Console CL] " + updatingTime() + " ===> ";
[etc ...]
I use $rootScope.defineCLC in my controllers.
For having the time updated, i put in pure js, outside :
function updatingTime() {
setTimeout('updatingTime()', 3000);
var currentTime = new Date();
console.log('ok !');
return currentTime;
}
problem is it's doesnt't work, the time is always the date when app whas executed :/ how to update the time for having it good in the console.log ?
setTimeout('updatingTime()', 3000); will give you an error after 3secs (check the developer console in the browser) since you supply a string instead of a function.
You'll have to make a function and call it with angular's version of setInterval.
var app = angular.module('app', []).run(function($rootScope, $interval) {
var fun = function() {
$rootScope.defineCLC = "[ZR Console CL] " + new Date() + " ===> ";
};
$interval(fun, 3000);
}]);
I have a search field. I would like to sendout the search query after a certain delay (eg 2000 ms)
Here is relevant angularjs code that I have managed to produce.
But I am certain there must be a better pattern to do this...
function SearchController($scope, $http, $timeout){
var update_results = function(originalWord){
if (originalWord == $scope.search_term){
$http.get("/search/"+ $scope.search_term).success(function(data){
$scope.search_results = data;
});
}
};
$scope.search = function(){
var originalWord = $scope.search_term.replace("xxxx", "xxxx"); //UGLY HACK TO CLONE A STRING
$timeout(function(){
update_results(originalWord);
}, 2000);
};
}
the fact that you used $timeout is great.
I've seen lots of angularJS codes and all of them use the same mechanism to fire up an event after a certain amount of time.
I am trying to create and initialize some sort of master view model that contains common view models that might be run on every page and page specific models that are appended on page load.
var MasterViewModel = {
commonViewModel1 : CommonViewModel1(),
commonViewModel2 : CommonViewModel1()
};
var commonInit = function() {
// Populate View Model Data
MasterViewModel.commonViewModel1 = initCommonViewModel1();
MasterViewModel.commonViewModel2 = initCommonViewModel2();
// Apply common view model bindings
ko.applyBindings(MasterViewModel);
};
var pageSpecificInit = function() {
// Populate Specific View Model Data
MasterViewModel.pageViewModel1 = initPageViewModel1();
MasterViewModel.pageViewModel2 = initPageViewModel2();
// Apply Page Specific Bindings
ko.applyBindings(MasterViewModel);
};
$(function() {
commonInit();
pageSpecificInit();
});
this is a crude example of what I am trying to do in the real application this is all namespaced and in separate files so that only page specific code is run. What is the best practice for doing this I somewhat based the above on http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html but when I do it in the application I get something like "cannot bind to pageViewModel1 undefined" should I setup my MasterViewModel differently to be more like
var MasterViewModel = {
commonViewModel1 : CommonViewModel1(),
commonViewModel2 : CommonViewModel1(),
pageViewModels : {}
};
var commonInit = function() {
// Populate View Model Data
MasterViewModel.commonViewModel1 = initCommonViewModel1();
MasterViewModel.commonViewModel2 = initCommonViewModel2();
// Apply common view model bindings
ko.applyBindings(MasterViewModel);
};
var pageSpecificInit = function() {
// Populate Specific View Model Data
MasterViewModel.pageViewModels.pageViewModel1 = initPageViewModel1();
MasterViewModel.pageViewModels.pageViewModel2 = initPageViewModel2();
// Apply Page Specific Bindings
ko.applyBindings(MasterViewModel.pageViewModels);
};
$(function() {
commonInit();
pageSpecificInit();
});
Your second example is more correct, but shouldn't you be binding the page-specific view models to a specific html element that you've surrounded with the stop binding comment?
ko.applyBindings(MasterViewModel.pageViewModels, $('#pageElement')[0]);
However, if you want to have nicely decoupled objects that can talk to each other, then you might want to look at Knockout Postbox
In my routers initialize methods have the same code (the code is repeated 3 times!).
I got 3 routers, so if I want to refactor code (change name etc) I will have to jump to 3 separate files and apply changes on each file.
Here goes the code:
initialize: =>
# http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
#contentView = new Backbone.AppView(".js-content")
#searchView = new Backbone.AppView(".js-searchbox")
#sidebarView = new Backbone.AppView(".js-sidebar")
Is there some kind of technique to DRY this code?
Some kind of superclass?
I use coffeescript.
You need to create an Abstract Router that do the initialization of required views and then your specific Routers must extend it:
var BaseRouter = Backbone.Router.extend({
initialize : function(){
console.log('Native Router!');
this.contentView = new Backbone.AppView(".js-content");
this.searchView = new Backbone.AppView(".js-searchbox");
this.sidebarView = new Backbone.AppView(".js-sidebar");
}
});
var RouterOne = BaseRouter.extend({
initialize : function(){
BaseRouter.prototype.initialize.call(this);
//specific stuff
}
});
var RouterTwo = BaseRouter.extend({
initialize : function(){
BaseRouter.prototype.initialize.call(this);
//specific stuff
}
});
var router1 = new RouterOne();
var router2 = new RouterTwo();
It looks like the parts of your DOM that you are instantiating here can all be considered 'child views' of a 'parent view'. By this token, why don't you instantiate #pageView = new BB.AppView(...) and then in #pageView's render() method go ahead and instantiate these three 'child classes'?