Angular JS if-else not working as expected - javascript

<body ng-app ng-controller="progressCircleController">
<h1 class="errorHeader">List of Classes</h1>
<!-- Modal -->
<div id="progressModal" class="container" role="dialog">
<form>
<ul class="col-md-12 col-lg-12">
<li ng-click="showErrorDetails(key)" class="col-sm-12 col-md-4 col-lg-4 eachClassCell"
ng-repeat='(key,value) in sampleJSON'>
<div ng-if="{{value.length}} <= 50">
<div title="{{key}}" class="progress green">{{key}}
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">{{key}}</div>
</div>
</div>
<div ng-if="{{value.length}} >= 50">
<div title="{{key}}" class="progress red">{{key}}
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">{{key}}</div>
</div>
</div>
</li>
</ul>
</form>
</div>
</body>
The progress circle created for each key is duplicate. I need to draw the progress circle based on the value.length of every key such that when value.length > 50 then draw the red circle and the value.length <=50 the draw the green circle.


It was angular js version issue.
I was using old angular js version (1.0.7) which I think does not recognize the > or < or any logical operator and it does not even throw any error in console.
Used angular JS version 1.2.29 and worked perfectly.
And changed the div to <div ng-if="value.length <= 50"> because it is already inside angular context.

Related

Polaris css to open Popover using jquery

I'm using Shopify Polaris CSS framework but I do not use React, I want to use jQuery.
I have this html:
<div class="Polaris-ActionMenu">
<div>
<div class="Polaris-ActionMenu-RollupActions__RollupActivator">
<button class="Polaris-Button Polaris-Button-sel" type="button" tabindex="0" aria-controls="Polarispopover1" aria-owns="Polarispopover1" aria-expanded="false">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">More actions</span>
<span class="Polaris-Button__Icon">
<div class="">
<span class="Polaris-Icon">
<span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--regular Polaris-Text--visuallyHidden">
</span>
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M13.098 8h-6.196c-.751 0-1.172.754-.708 1.268l3.098 3.432c.36.399 1.055.399 1.416 0l3.098-3.433c.464-.513.043-1.267-.708-1.267Z">
</path>
</svg>
</span>
</div>
</span>
</span>
</button>
</div>
<div>
<div data-portal-id="popover-Polarisportal1">
<div class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open">
<div class="Polaris-Popover" data-polaris-overlay="true">
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
<div class="Polaris-Popover__Wrapper">
<div tabindex="-1" class="Polaris-Popover__Content" style="display: none;">
<div class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--horizontal" data-polaris-scrollable="true">
<div class="Polaris-ActionList">
<div class="Polaris-ActionList__Section--withoutTitle">
<ul class="Polaris-ActionList__Actions" role="menu" tabindex="-1">
<li role="presentation"><span class="Polaris-ActionList__Content"><span class="Polaris-ActionList__Text">Duplicate</span></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
to open the Popover I write this jquery code:
$('.Polaris-Button-sel').click(function() {
$(this).closest('.Polaris-Popover__Content').toggle();
});
and
$('.Polaris-Button-sel').click(function() {
$(this).next('.Polaris-Popover__Content').toggle();
});
but both dont work. Please help how to open Popover using jquery code

AngularJs - On ng-click all items get affected

I'm trying to change the scope when i click on the element but when i do that all the elements get's changed
What im trying to accomplish is when i click on one of the div, i want te color of the div to change to red. this part works fine. Then i also want to the scope to change when i click on one of the divs. What is happening here is that all the scopes are changing.
<div class="col-md-3 col-sm-6 mb-3" ng-repeat="student in stuRegister.students" ng-click="stuRegister.absneceChange($index, absence)">
<div id="myDIV{{$index}}" class="card text-white bg-success o-hidden h-100" data-index="{{$index}}">
<div class="card-body">
<div class="mr-5" >
<p>{{$index + 1}}. <strong>{{student.name}}</strong></p></div>
<div class="mr-5" data-ng-model-options="stuRegister.aData.role" ><strong ng-bind="absence">Status: {{absence[0]}}</strong></div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">Indmeld fravær</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
Js:
$scope.absence = "Tilstede";
this.absneceChange = function(index, absence){
var element = document.getElementsByClassName("card");
$scope.absence = $scope.absence === "Tilstede" ? "Fravær" : "Tilstede";
element[index].classList.toggle("bg-danger");
element[index].classList.toggle("bg-warning");
}

Alternate Image/text position in foreach loop dynamic data

So I am displaying two blocks of data in a tile format using bootstrap I can have two halves of a row. In this case on the right I have an image, on the left I have a div which displays text and buttons. I intend to have the even rows have the image on the left and odd on the right. So basically an image will always be on top and under text. Alternating in each row the divs will be mirrored.
Using javascript, blade, php or css how could i achieve this effect?
#foreach ($offers as $offer)
<div class="offersNew">
<div class="row row-equal-height">
<div class="col-md-6 paddedCol6">
<div class="inner">
<h2 class="centered marginTop0">{{ $offer->title or 'No title' }}</h2>
<h3 class="sub-header centered">{{ $offer->sub_header or '' }}</h3>
<p class="centered">
{{ mb_strimwidth(strip_tags($offer->homepage_description), 0, 200, '...') }}
</p>
<div class="callToAction">
<center>
<a href="/offer/{{ $offer->slug or $offer->id }}">
<button class="buttonOne"><p class="sub-header line0 margin1 white smallerText"> Let&apos;s Go! </p></button>
</a>
<a href="/offer/{{ $offer->slug or $offer->id }}">
<button class="buttonTwo"><p class="sub-header line0 margin1 blue smallerText">Other Offers</p></button>
</a>
</center>
</div>
#if ($offer->countdown == 1)
<div class="row countdown" data-timer="{{ $offer->end }}">
<h2 class="sub-header centered">
<span class="blueText">OFFER END</span>
<span class="days">0</span>:
<span class="hours">0</span>:
<span class="minutes">0</span>:
<span id="seconds"></span>
<span id="offerEndtime">0</span>
</h2>
</div>
#endif
</div>
</div>
<div class="col-md-6 main-background hidden-sm hidden-xs max400" style="background-image:url('{{ $offer->image or '' }}')">
</div>
</div>
</div>
#endforeach

Add a count variable and use modulus to alternate.
$count = 0;
foreach($offers as $offer){
if($count % 2 == 0){
// show variation 1
}else{
// show variation 2
}
$count++;
}

Creating a custom filter for ng-repeat

I'm trying to create a filter inside an ng-repeat. What i'm trying to achieve is a list -> more information on button click combination. I'm using the prestashop webservice for retrieving data. All the data is pulled from a json object.
So i did try some other solutions found on stack but sadly those didn't work for me. See the following example:
So my html exists of 2 blocks. One is a list of all orders, shortly summarized by id, date and the total payed amount. The other block would be the more information section. This section would show wich products were ordered, at what date, etc.
So i've created the list and made the div (each list item) a clickable element by adding ng-click. (yes i did also try a <button ng-click="function()"> but since it didn't made any difference between using the div or the button i've chosen for the div (layout).
So the onclick event grabs the order.id and adds it to a filter. This filter is then applied on the second "more information" block. This block should then filter this id and only grab that information. But thats where i've stranded since this part is still not working. So what i've tried so far is shown below:
My HTML
var myApp = angular.module('myApp',['ngRoute','cgNotify','pascalprecht.translate','ngCookies','ngSanitize']);
// Orders
myApp.controller('OrderController', function($scope, $http){
$http.get('config/get/getOrders.php').then(function(response){
$scope.orders = response.data.orders.order
});
$scope.currentOrder = {
"id": 3
};
console.log($scope.currentOrder);
$scope.showOrder = function(order) {
var order_id = order.id;
$scope.currentOrder = {
"id": parseInt(order_id)
};
console.log($scope.currentOrder);
return $scope.currentOrder;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- The list -->
<div class="col-lg-12" ng-controller="OrderController">
<div class="container">
<form class="defaultinput col-xl-5 col-lg-6 col-md-8 d-flex justify-content-start">
<svg class="align-self-center d-flex" height="20px" version="1.1" viewbox="7 5 20 20" width="20px" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path d="M27,23.5376923 L20.7969231,17.3046154 C21.7538462,16.0192308 22.3276923,14.4292308 22.3276923,12.7007692 C22.3276923,8.44769231 18.8969231,5 14.6638462,5 C10.4307692,5 7,8.44769231 7,12.7007692 C7,16.9538462 10.4307692,20.4015385 14.6638462,20.4015385 C16.4084615,20.4015385 18.0123077,19.8092308 19.3,18.8223077 L25.4476923,25 L27,23.5376923 L27,23.5376923 Z M8.35846154,12.7007692 C8.35846154,9.20692308 11.1869231,6.36461538 14.6638462,6.36461538 C18.1407692,6.36461538 20.9692308,9.20692308 20.9692308,12.7007692 C20.9692308,16.1946154 18.1407692,19.0369231 14.6638462,19.0369231 C11.1869231,19.0369231 8.35846154,16.1946154 8.35846154,12.7007692 L8.35846154,12.7007692 Z" fill="#8E8E93" fill-rule="evenodd" id="Search-Icon" stroke="none"></path></svg>
<input class="form-control" placeholder="{{ 'Zoeken' | translate }}" type="text">
</form>
<div class="row listrow" ng-repeat="order in orders">
<div ng-click="showOrder(order)" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3">
<p type="number" ng-bind="order.id" ng-value="order.id"></p>
</div>
<div class="col-lg-4">
<p ng-bind="order.invoice_date"></p>
</div>
<div class="col-lg-5">
<p ng-bind="order.total_paid_real"></p>
</div>
</div>
</div>
</div>
</div>
<!-- The more information block -->
<div class="col-lg-11" ng-controller="OrderController">
<div>
<div ng-repeat="order in orders | filter: currentOrder" class="text-center margin-t-10">
<div class="row listrow"></div>
<h1>{{ 'Totaal' | translate }}</h1><h1 ng-bind="order.id"></h1>
<h3>#010 - {{ 'Contant' | translate }} {{ 'Betaald' | translate }}</h3>
</div>
<div class="row listrow margin-t-20 no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row listrow no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row margin-t-30 justify-content-end">
<div class="col-6">
<div class="row">
<div class="col-6">
{{ 'Subtotaal' | translate }}
</div>
<div class="col-6 text-right">
€ 400,00
</div>
</div>
<div class="row listrow">
<div class="col-6">
21% {{ 'BTW' | translate }}
</div>
<div class="col-6 text-right">
€ 84,00
</div>
</div>
<div class="row">
<div class="col-5 padding-r-5">
{{ 'Totaal' | translate }}
</div>
<div class="col-3 align-self-center no-padding">
<h6>(2 items)</h6>
</div>
<div class="col-4 padding-l-0 text-right">
€ 484,00
</div>
</div>
</div>
</div>
</div>
<div class="row margin-t-100 d-flex justify-content-around">
<button ng-click="" type="button" class="smallbutton defaultbutton">{{ 'Print bon' | translate }}</button>
<a href="#/refund">
<button type="button" class="smallbutton defaultbutton">{{ 'Retour' | translate }}</button>
</a>
</div>
</div>
The JSON example
{"orders":{"order":[{"id":"1","id_address_delivery":"4","id_address_invoice":"4","id_cart":"1","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"4","invoice_date":"2017-03-16 15:18:27","delivery_number":"4","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"#attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"55.000000","total_paid_tax_incl":"55.000000","total_paid_tax_excl":"55.000000","total_paid_real":"55.000000","total_products":"53.000000","total_products_wt":"53.000000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"XKBKNABJK","associations":{"order_rows":{"#attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"1","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"},{"id":"2","product_id":"3","product_attribute_id":"13","product_quantity":"1","product_name":"Printed Dress - Color : Orange, Size : S","product_reference":"demo_3","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"25.999852","unit_price_tax_incl":"26.000000","unit_price_tax_excl":"26.000000"}]}}},{"id":"2","id_address_delivery":"4","id_address_invoice":"4","id_cart":"2","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"3","invoice_date":"2017-03-16 15:18:27","delivery_number":"3","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"#attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"75.900000","total_paid_tax_incl":"75.900000","total_paid_tax_excl":"75.900000","total_paid_real":"75.900000","total_products":"73.900000","total_products_wt":"73.900000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"OHSATSERP","associations":{"order_rows":{"#attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"3","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"}
To make it easier i've also created a JSfiddle
So my question is, since the first set of the filter is working (3). Why isn't my on click function working? with the console.log() i checked if the id is selected and it is. So why isn't the filter updated?
If you have any questions please ask them as comments.
As always, Thanks in advance!

Slow performance rendering in client templating engine (Rivets.js)

I'm rendering an array of of about 1000 objects. The html bindings are very heavy (see below). It's taking about 5 seconds to rivets.bind().
Any suggestions on improving performance? I don't think I can afford to bind in chunks as I'm using a pagination/sorting library in conjuction that needs the entire array in order to sort/paginate.
Here is my HTML for each object (tracks):
<div rv-each-track="tracks" class="track-row row has-hover" rv-download-url="track.direct_path.download_path" rv-api-key="track.track.apikey" rv-media-url="track.direct_path.audio" rv-track-title="track.track.name" rv-wave-data="track.direct_path.wave_default" rv-wave-progress-data="track.direct_path.wave_progress">
<div class="mobile-margin">
<div class="track-hover desktop-only">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title">{track.track.name}<span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></div>
<div class="hover-links">
<div class="item hamburger holds-tooltip main-hover-item icon-hamburger" data-toggle="tooltip" data-original-title="Alternate Versions"></div>
<div class="item share main-hover-item popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist icon-playlist-add popover-button holds-tooltip main-hover-item" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist"></div>
<div class="item download icon-download holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Download Track"></div>
<div class="item cart last icon-cart-plus holds-tooltip main-hover-item popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item remove last icon-x holds-tooltip main-hover-item" data-toggle="tooltip" data-original-title="Remove Track" rv-data-delete-track-id="track.track.apikey"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="track-variations">
<div rv-each-variation="track.variations.tracks" class="row variation-row" rv-data-track-id="track.track.apikey" rv-api-key="variation.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name" rv-wave-data="variation.direct_path.wave_default" rv-wave-progress-data="variation.direct_path.wave_progress">
<div class="col-md-8 variation-title">{variation.track.name}</div>
<div class="col-md-2 variation-length">{variation.track.tracklength}</div>
<div class="track-hover variation">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title"><a class="track-link">{variation.track.name}</a></div>
<div class="hover-links">
<div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div>
<div class="item download icon-download" rv-data-media-url="track.direct_path.download_path" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div>
<div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item last remove main-hover-item icon-x"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div>
</div>
</div>
<div class="col-md-4 first-title desktop-only"><a class="offset-left track-title-link track-link" href="">{track.track.name}</a><span rv-class="track.track.staff_pick | staffPickClass" data-toggle="tooltip" data-original-title="Staff Pick"></span></span></div>
<div class="col-md-3 genre desktop-only"><span class="offset-left">{track.genre}</span></div>
<div class="col-md-2 mood desktop-only"><span class="offset-left">{track.mood}</span></div>
<div class="col-md-2 canvas desktop-only"><div class="mini-wave offset-left" rv-style-background-image="track.direct_path.wave_canvas"></div></div>
<div class="col-md-1 last-title duration desktop-only"><span>{track.track.tracklength}</span></div>
<div class="col-md-1 last-title last-played pull-right desktop-only">{track.lastPlayed}</div>
<div class="mobile-play icon-play pull-left mobile-only inline-play"></div>
<div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{track.track.name}</div><span rv-class="track.track.staff_pick | staffPickClass"></span></div>
<div class="mobile-track-buttons pull-right">
<div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div>
<div class="pull-right mobile-only mobile-button mobile-variations-button icon-hamburger"></div>
</div>
<div class="is-staff-pick hidden">{track.track.staff_pick | staffPickValue}</div>
<div class="instrument hidden">{track.instrument}</div>
<div class="industry hidden">{track.industry}</div>
<div class="tempo hidden">{track.tempo}</div>
<div class="aggregated-terms hidden">{track.tag_list} {track.track.name}</div>
<div class="date-last-played hidden">{track.dateLastPlayed}</div>
<div class="clearfix"></div>
</div>
<div class="track-variations mobile-only">
<div rv-each-variation="track.variations.tracks" class="row variation-row" rv-api-key="track.track.apikey" rv-media-url="variation.direct_path.audio" rv-track-title="variation.track.name">
<div class="mobile-margin">
<div class="col-md-8 variation-title desktop-only">{variation.track.name}</div>
<div class="col-md-2 variation-length desktop-only">{variation.track.tracklength}</div>
<div class="track-hover variation">
<div class="hover-play icon-play inline-play"></div>
<div class="hover-title">{variation.track.name}</div>
<div class="hover-links">
<div class="item share popover-button icon-share" data-target="#not-ready-popover"><div class="tooltip-holder holds-tooltip" data-toggle="tooltip" data-original-title="Share Track"></div></div>
<div class="item playlist popover-button icon-playlist-add" data-target="#playlist-popover" data-toggle="tooltip" data-original-title="Add to Playlist" data-placement="left"></div>
<div class="item download icon-download" data-toggle="tooltip" data-original-title="Download Track" data-placement="left"></div>
<div class="item cart last icon-cart-plus holds-tooltip popover-button" data-target="#not-ready-popover" data-toggle="tooltip" data-original-title="Add to Cart"></div>
<div class="item last remove main-hover-item icon-x"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="mobile-play icon-play pull-left mobile-only inline-play"></div>
<div class="mobile-track-title mobile-only track-row-item-margin"><div class="track-title-link">{variation.track.name}</div></div>
<div class="mobile-track-buttons pull-right">
<div class="pull-right mobile-only mobile-button mobile-track-menu-button left-margin icon-plus"></div>
</div>
</div>
</div>
<div class="no-variations" rv-hide="track.variations.tracks | shouldHideNoVariations">There are no alternate versions of this track.</div>
</div>

Do not do rivets events example: rv-click which will degrade your performance because you will be passing your entire view for the callback method.
DO not pass entire view to the rivets.bind()
pass only the necessary models and do it.
If it is possible first bind 100 elements and then if user scrolled half of the page bind again 100 elements which will improve your performance for sure.
I did the below changes in binders to make it run faster even in lower end mobile devices as well.
rivets.binders.text = function(el, value) {
if (el.textContent != null) {
return el.textContent;
}
else {
return el.innerText;
}
};

I've come to the the conclusion that yes, there are minor performance improvements that I could potentially implement for binding 1000+ (large html) objects to the DOM using Rivets. However, the root issue is the fact that I'm trying to bind 1000+ rivets into the DOM at once and that is going to be inherently slow using any technique (I've tested with React, jQuery, Rivets, etc...).
The solution to this problem is to simply find another way. I've chosen to pre-render the html on the server and serve it up through an API response. This cut the page load time down from ~5s to ~1s.

Categories