Using lazy loading with Backbone - javascript

I'm trying to use this lazy loading plugin in a backbone app, I adapted the template to work with the plugin and called and the plugin script in but it doesn't work. Here is the jsfiddle:http://jsfiddle.net/swayziak/9R9zU/27/
The template:
<script id="bookTemplate" type="text/template">
<img src="https://www.amrms.com/ssl/iftafoundation/bluepay/Images/Loading_Animation.gif" data-src="<%= image %>"/>
<h2 class="bookTitle"><%= title %><h2>
</script>
And the script on document ready:
$(document).ready(function() {
$("img").unveil();
});
I don't know what's wrong with my code.

First of all you are using incorrect path to the plugin in your fiddle.
Another one thing why it is not working is related to the place where you put plugin initialization. You initialize it on the document ready but your images is not rendered yet. So you have to initialize plugin after rendering the view (when images are added to the DOM).

You have a problem with version of Zepto, unveil uses filter function that was updated in zepto latest version: (from http://zeptojs.com/#changelog)
New features
$.fn.filter(function(index){ ... })
Check out updated jsfiddle (http://jsfiddle.net/9R9zU/41/) that uses http://zeptojs.com/zepto.js source.
EDIT:
to make the entire example work I moved the unveil call to the view render function (http://jsfiddle.net/9R9zU/52/)
app.BookView = Backbone.View.extend ({
tagName: 'div',
className: 'book',
template: _.template( $( '#bookTemplate' ).html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.$el.find("img").unveil();//for every render we run the lazy loader
return this;
}
});

Related

JsTree is not applied on a later built list

I have an Angular2 web application which loads a ul/li-list from a remote JSON object when a button is clicked.
The generated div and list looks like this:
<div class="jstree jstree-1 jstree-default jstree-leaf" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_loading" aria-busy="false" ng-reflect-inner-h-t-m-l="<ul class=".actual"><li>Windows<ul><li>setupact.log</li><li>Tasks<ul><li>SCHEDLGU.TXT</li></ul></li><li>Logs<ul><li>CBS<ul><li>CBS.log</li></ul></li><li>DPX<ul><li>setupact.log</li></ul></li></ul></li><li>AppCompat<ul><li>Programs<ul><li>AEINV_PREVIOUS.xml</li><li>RecentFileCache.bcf</li><li>AEINV_WER_{91399519-4D7E-4F2D-8E40-5C55523C2307}_20160914_210543.xml</li></ul></li></ul></li><li>winsxs<ul><li>ManifestCache<ul><li>702349c5b78f9a04_blobs.bin</li></ul></li><li>poqexec.log</li></ul></li><li>rescache<ul><li>ResCache.mni</li></ul></li><li>System32<ul><li>Microsoft<ul><li>Protect<ul><li>S-1-5-19<ul><li>Preferred</li></ul></li></ul></li></ul></li><li>7B296FB0-376B-497e-B012-9C450E1B7327-5P-1.C7483456-A289-439d-8115-601632D005A0</li><li>winevt<ul><li>Logs<ul><li>Security.evtx</li><li>Microsoft-Windows-Windows Firewall With Advanced Security%4Firewall.evtx</li><li>Windows PowerShell.evtx</li><li>Microsoft-Windows-Dhcpv6-Client%4Admin.evtx</li><li>System.evtx</li><li>Microsoft-Windows-Application-Experience%4Program-Telemetry.evtx</li><li>Microsoft-Windows-Kernel-WHEA%4Operational.evtx</li><li>Microsoft-Windows-Resource-Exhaustion-Detector%4Operational.evtx</li><li>Microsoft-Windows-NetworkLocationWizard%4Operational.evtx</li><li>Microsoft-Windows-LanguagePackSetup%4Operational.evtx</li><li>Microsoft-Windows-OfflineFiles%4Operational.evtx</li><li>Microsoft-Windows-WindowsBackup%4ActionCenter.evtx</li><li>Microsoft-Windows-International%4Operational.evtx</li><li>Microsoft-Windows-WindowsUpdateClient%4Operational.evtx</li><li>Microsoft-Windows-MUI%4Operational.evtx</li><li>Microsoft-Windows-Diagnostics-Performance%4Operational.evtx</li><li>Microsoft-Windows-Compat-Appraiser%4Operational.evtx</li><li>Microsoft-Windows-Diagnosis-DPS%4Operational.evtx</li><li>Application.evtx</li><li>Microsoft-Windows-BranchCacheSMB%4Operational.evtx</li><li>Microsoft-Windows-Bits-Client%4Operational.evtx</li><li>Microsoft-Windows-GroupPolicy%4Operational.evtx</li><li>Microsoft-Windows-Windows Defender%4Operational.evtx</li><li>Microsoft-Windows-Known Folders API Service.evtx</li><li>Microsoft-Windows-Windows Defender%4WHC.evtx</li><li>Microsoft-Windows-HomeGroup Provider Service%4Operational.evtx</li><li>Microsoft-Windows-ReliabilityAnalysisComponent%4Operational.evtx</li><li>Microsoft-Windows-CodeIntegrity%4Operational.evtx</li><li>Microsoft-Windows-TerminalServices-RemoteConnectionManager%4Operational.evtx</li><li>Microsoft-Windows-User Profile Service%4Operational.evtx</li><li>Microsoft-Windows-WinRM%4Operational.evtx</li><li>Microsoft-Windows-NetworkProfile%4Operational.evtx</li><li>Microsoft-Windows-Application-Experience%4Program-Inventory.evtx</li><li>Microsoft-Windows-TerminalServices-LocalSessionManager%4Operational.evtx</li><li>Setup.evtx</li><li>Microsoft-Windows-CAPI2%4Operational.evtx</li></ul></li></ul></li><li>7B296FB0-376B-497e-B012-9C450E1B7327-5P-0.C7483456-A289-439d-8115-601632D005A0</li><li>wdi<ul><li>{86432a0b-3c7d-4ddf-a89c-172faa90485d}<ul><li>S-1-5-21-1426688081-248760799-3800414735-1001_UserData.bin</li></ul></li><li>ShutdownPerformanceDiagnostics_SystemData.bin</li><li>BootPerformanceDiagnostics_SystemData.bin</li><li>LogFiles<ul><li>WdiContextLog.etl.003</li><li>WdiContextLog.etl.002</li><li>WdiContextLog.etl.001</li><li>BootCKCL.etl</li><li>ShutdownCKCL.etl</li></ul></li></ul></li><li>LogFiles<ul><li>Scm<ul><li>a1cfa52f-06f2-418d-addb-cd6456d66f43</li><li>2c59ecaf-3a27-4640-9f4b-519b05bdd70f</li><li>5b184694-64c3-4633-94c5-945b3fa561d6</li><li>6b7ac694-8d6d-481b-9dd8-2a3a741ada6d</li><li>956981f2-9434-4ac7-92d1-255484e54e4d</li><li>bba67ad0-4ba0-4b44-827b-ff419b70c057</li><li>b9bee219-c29e-4310-819c-147a5a0e045e</li><li>731e9c62-95b5-4c8c-ab64-4cc591c9ff5b</li><li>9334c323-f100-4656-9ba0-e4aa69c0f9c2</li><li>d21f6024-191f-4454-bbbc-09a650da2549</li><li>a316e645-1c56-45a6-bd6a-7dca79778090</li><li>a6394592-54ce-4e93-8d64-1a068f462632</li><li>f1369a11-e983-4458-b390-712efa1cba44</li><li>38279e40-3dc1-4c28-a688-148aed61ff69</li><li>1ec9510d-a439-4950-9399-b6399edf9ea7</li><li>de8bae53-2809-4f75-85ef-427d364b9b2c</li><li>9b75c702-ea13-406a-badb-6c588ee4375b</li><li>de8699d2-8a05-42f7-8a85-5162af47d26a</li></ul></li><li>WMI<ul><li>RtBackup<ul><li>EtwRTDiagLog.etl</li><li>EtwRTEventLog-Application.etl</li><li>EtwRTEventLog-System.etl</li></ul></li></ul></li></ul></li><li>spool<ul><li>drivers<ul><li>w32x86<ul><li>3<ul><li>mxdwdui.BUD</li></ul></li><li>PCC<ul><li>tsprint.inf_x86_neutral_c48d421ad2c1e3e3.cab</li></ul></li></ul></li></ul></li></ul></li><li>Tasks<ul><li>Microsoft<ul><li>Windows Defender<ul><li>MP Scheduled Scan</li></ul></li></ul></li></ul></li><li>DriverStore<ul><li>INFCACHE.1</li><li>FileRepository<ul><li>prnep00l.inf_x86_neutral_3323920c1a72a42d<ul><li>prnep00l.PNF</li></ul></li><li>prnbr009.inf_x86_neutral_3f6b69c8d1091fd8<ul><li>prnbr009.PNF</li></ul></li><li>prnkm002.inf_x86_neutral_ded1a36701bddc86<ul><li>prnkm002.PNF</li></ul></li><li>prnca003.inf_x86_neutral_f0a023edfd5cd833<ul><li>prnca003.PNF</li></ul></li><li>prnca00d.inf_x86_neutral_8883e3ab4a33bfbb<ul><li>prnca00d.PNF</li></ul></li><li>prnbr006.inf_x86_neutral_331a0c6df1c9d3e1<ul><li>prnbr006.PNF</li></ul></li><li>prnep004.inf_x86_neutral_25623e649d146f5d<ul><li>prnep004.PNF</li></ul></li><li>prnkm003.inf_x86_neutral_ea465b3729b37f54<ul><li>prnkm003.PNF</li></ul></li><li>prnbr005.inf_x86_neutral_407befecac90c7f1<ul><li>prnbr005.PNF</li></ul></li><li>prnrc003.inf_x86_neutral_e9198ff5f961d947<ul><li>prnrc003.PNF</li></ul></li><li>bth.inf_x86_neutral_a6bf6d613b46f6a5<ul><li>bth.PNF</li></ul></li><li>prnin004.inf_x86_neutral_2aba7beb4ab9a9e8<ul><li>prnin004.PNF</li></ul></li><li>prnnr004.inf_x86_neutral_15e7dc89d102e928<ul><li>prnnr004.PNF</li></ul></li><li>prnin002.inf_x86_neutral_b9fa18a8d63d5294<ul><li>prnin002.PNF</li></ul></li><li>prnca00g.inf_x86_neutral_b19defbd7969a7c7<ul><li>prnca00g.PNF</li></ul></li><li>prnhp005.inf_x86_neutral_9307c57b91a7985e<ul><li>prnhp005.PNF</li></ul></li><li>prnrc006.inf_x86_neutral_404ca57b9d9c1e47<ul><li>prnrc006.PNF</li></ul></li><li>amdsata.inf_x86_neutral_5c3d0d1e97e99e10<ul><li>amdsata.PNF</li></ul></li><li>prnrc005.inf_x86_neutral_73b01a2655fdb5c5<ul><li>prnrc005.PNF</li></ul></li><li>prnca00f.inf_x86_neutral_b94365c0e502f290<ul><li>prnca00f.PNF</li></ul></li><li>prnep00a.inf_x86_neutral_d4494950448771ed<ul><li>prnep00a.PNF</li></ul></li><li>prnge001.inf_x86_neutral_51cbe14e4cdde8c2<ul><li>prnge001.PNF</li></ul></li><li>prnkm004.inf_x86_neutral_b456c14d5367f83c<ul><li>prnkm004.PNF</li></ul></li><li>prnbr008.inf_x86_neutral_87aae9d395393afd<ul><li>prnbr008.PNF</li></ul></li><li>prnok002.inf_x86_neutral_436ff5d24333cca0<ul><li>prnok002.PNF</li></ul></li><li>prnin003.inf_x86_neutral_dca922447801904c<ul><li>prnin003.PNF</li></ul></li><li>prnsa002.inf_x86_neutral_db272f9cd17a383f<ul><li>prnsa002.PNF</li></ul></li><li>prnbr007.inf_x86_neutral_af94d26aafd1ca3a<ul><li>prnbr007.PNF</li></ul></li><li>prnep003.inf_x86_neutral_342be98eb74e1449<ul><li>prnep003.PNF</li></ul></li><li>prnep005.inf_x86_neutral_f4a4a2a89cb57323<ul><li>prnep005.PNF</li></ul></li><li>prnrc004.inf_x86_neutral_7d5665e9e43f678d<ul><li>prnrc004.PNF</li></ul></li><li>prnhp003.inf_x86_neutral_8685826a5ca37e6b<ul><li>prnhp003.PNF</li></ul></li><li>iastorv.inf_x86_neutral_0bcee2057afcc090<ul><li>iastorv.PNF</li></ul></li><li>prnca00b.inf_x86_neutral_c675b60dd45218c1<ul><li>prnca00b.PNF</li></ul></li><li>prnrc007.inf_x86_neutral_cfebba21b1c02dd7<ul><li>prnrc007.PNF</li></ul></li><li>prnle003.inf_x86_neutral_a8106f7f3af21d88<ul><li>prnle003.PNF</li></ul></li><li>prnbr002.inf_x86_neutral_1d14699bf2d4d936<ul><li>prnbr002.PNF</li></ul></li><li>prnnr003.inf_x86_neutral_02802729a95f0eed<ul><li>prnnr003.PNF</li></ul></li><li>prnep00c.inf_x86_neutral_92ff44dcbf1c760c<ul><li>prnep00c.PNF</li></ul></li><li>prnsv003.inf_x86_neutral_2011fa0a7f786266<ul><li>prnsv003.PNF</li></ul></li><li>prnnr002.inf_x86_neutral_b9a1c43c0cb6c940<ul><li>prnnr002.PNF</li></ul></li><li>faxcn002.inf_x86_neutral_29a66691dd7a46a5<ul><li>faxcn002.PNF</li></ul></li><li>prnod002.inf_x86_neutral_c36a5fe1ac15a734<ul><li>prnod002.PNF</li></ul></li><li>prnrc00b.inf_x86_neutral_354df7938905aa3b<ul><li>prnrc00b.PNF</li></ul></li><li>prnep00b.inf_x86_neutral_d0e9433101a2df79<ul><li>prnep00b.PNF</li></ul></li><li>prnsv004.inf_x86_neutral_3ee5a15023f3b3ed<ul><li>prnsv004.PNF</li></ul></li><li>prngt002.inf_x86_neutral_a10ecaa46786286d<ul><li>prngt002.PNF</li></ul></li><li>nvraid.inf_x86_neutral_0276fc3b3ea60d41<ul><li>nvraid.PNF</li></ul></li><li>prnbr004.inf_x86_neutral_a976dec554a0be13<ul><li>prnbr004.PNF</li></ul></li><li>prnep002.inf_x86_neutral_9111d9b86cbd3f64<ul><li>prnep002.PNF</li></ul></li><li>prnrc002.inf_x86_neutral_3fb2e6c401a9c7d8<ul><li>prnrc002.PNF</li></ul></li><li>prnbr003.inf_x86_neutral_21c4516754f2bda5<ul><li>prnbr003.PNF</li></ul></li><li>prnle004.inf_x86_neutral_60637fb8287b0bdb<ul><li>prnle004.PNF</li></ul></li><li>prnkm005.inf_x86_neutral_a2013031e279b6f6<ul><li>prnkm005.PNF</li></ul></li><li>prngt004.inf_x86_neutral_f7b569fe96e4f7ae<ul><li>prngt004.PNF</li></ul></li><li>prnhp002.inf_x86_neutral_e6daa9c39ac001a3<ul><li>prnhp002.PNF</li></ul></li><li>prnfx002.inf_x86_neutral_f83f67e1c22e557b<ul><li>prnfx002.PNF</li></ul></li><li>prnhp004.inf_x86_neutral_95288ae6f32f1fe7<ul><li>prnhp004.PNF</li></ul></li></ul></li></ul></li><li>SMI<ul><li>Store<ul><li>Machine<ul><li>SCHEMA.DAT{f74722ed-7b07-11e6-b6ad-0800273c6b02}.TM.blf</li><li>SCHEMA.DAT.LOG1</li><li>SCHEMA.DAT{f74722ed-7b07-11e6-b6ad-0800273c6b02}.TMContainer00000000000000000001.regtrans-ms</li><li>SCHEMA.DAT</li></ul></li></ul></li></ul></li><li>CodeIntegrity<ul><li>bootcat.cache</li></ul></li><li>wbem<ul><li>Repository<ul><li>MAPPING1.MAP</li><li>MAPPING2.MAP</li><li>MAPPING3.MAP</li><li>OBJECTS.DATA</li><li>INDEX.BTR</li></ul></li></ul></li><li>wfp<ul><li>wfpdiag.etl</li></ul></li><li>config<ul><li>SOFTWARE.LOG1</li><li>SECURITY.LOG1</li><li>SAM</li><li>DEFAULT.LOG1</li><li>COMPONENTS.LOG1</li><li>systemprofile<ul><li>AppData<ul><li>LocalLow<ul><li>Microsoft<ul><li>CryptnetUrlCache<ul><li>MetaData<ul><li>7396C420A8E1BC1DA97F1AF0D10BAD21</li><li>57C8EDB95DF3F0AD4EE2DC2B8CFD4157</li><li>37C951188967C8EB88D99893D9D191FE</li><li>21253908F3CB05D51B1C2DA8B681A785</li><li>A1377F7115F1F126A15360369B165211</li><li>F90F18257CBB4D84216AC1E1F3BB2C76</li><li>A583E2A51BFBDC1E492A57B7C8325850</li><li>3130B1871A126520A8C47861EFE3ED4D</li><li>696F3DE637E6DE85B458996D49D759AD</li><li>4C7F163ED126D5C3CB9457F68EC64E9E</li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li>SYSTEM</li><li>DEFAULT</li><li>COMPONENTS{6cced2ed-6e01-11de-8bed-001e0bcd1824}.TM.blf</li><li>SAM.LOG1</li><li>SYSTEM.LOG1</li><li>COMPONENTS</li><li>SECURITY</li><li>COMPONENTS{6cced2ed-6e01-11de-8bed-001e0bcd1824}.TMContainer00000000000000000002.regtrans-ms</li><li>COMPONENTS{6cced2ed-6e01-11de-8bed-001e0bcd1824}.TMContainer00000000000000000001.regtrans-ms</li><li>TxR<ul><li>{6cced300-6e01-11de-8bed-001e0bcd1824}.TxR.0.regtrans-ms</li><li>{6cced300-6e01-11de-8bed-001e0bcd1824}.TxR.2.regtrans-ms</li><li>{6cced300-6e01-11de-8bed-001e0bcd1824}.TxR.blf</li><li>{6cced301-6e01-11de-8bed-001e0bcd1824}.TM.blf</li><li>{6cced301-6e01-11de-8bed-001e0bcd1824}.TMContainer00000000000000000001.regtrans-ms</li></ul></li><li>SOFTWARE</li></ul></li><li>NetworkList<ul><li>Icons<ul><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_16.bin</li><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_24.bin</li><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_48.bin</li><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_32.bin</li></ul></li></ul></li><li>catroot2<ul><li>{F750E6C3-38EE-11D1-85E5-00C04FC295EE}<ul><li>catdb</li></ul></li><li>{127D0A1D-4EF2-11D1-8608-00C04FC295EE}<ul><li>catdb</li></ul></li><li>edb.log</li><li>edb004E5.log</li><li>edb.chk</li><li>edb004E4.log</li></ul></li></ul></li><li>SoftwareDistribution<ul><li>DataStore<ul><li>DataStore.edb</li><li>Logs<ul><li>edb.chk</li><li>edb.log</li></ul></li></ul></li><li>ReportingEvents.log</li></ul></li><li>ServiceProfiles<ul><li>NetworkService<ul><li>NTUSER.DAT.LOG1</li><li>NTUSER.DAT</li><li>AppData<ul><li>Roaming<ul><li>Microsoft<ul><li>SoftwareProtectionPlatform<ul><li>Cache<ul><li>cache.dat</li></ul></li><li>tokens.dat</li></ul></li></ul></li></ul></li><li>Local<ul><li>Microsoft<ul><li>Media Player<ul><li>CurrentDatabase_372.wmdb</li></ul></li></ul></li><li>Temp<ul><li>MpCmdRun.log</li></ul></li></ul></li></ul></li></ul></li><li>LocalService<ul><li>NTUSER.DAT.LOG1</li><li>NTUSER.DAT</li><li>AppData<ul><li>Roaming<ul><li>PeerNetworking<ul><li>idstore.sst</li><li>idstore.sst.new</li></ul></li><li>Microsoft<ul><li>Crypto<ul><li>RSA<ul><li>S-1-5-19<ul><li>7e22207fe9846926e18c29d3e675240e_f98e9ddc-0e1b-4293-b1aa-bc41c96b9f31</li></ul></li></ul></li></ul></li></ul></li></ul></li><li>Local<ul><li>FontCache-S-1-5-21-1426688081-248760799-3800414735-1001.dat</li><li>FontCache-System.dat</li><li>FontCache-FontFace.dat</li></ul></li></ul></li></ul></li></ul></li><li>bootstat.dat</li><li>servicing<ul><li>Sessions<ul><li>Sessions.xml</li><li>Sessions.back.xml</li><li>30543655_539879863.xml</li></ul></li></ul></li><li>Temp<ul><li>MpCmdRun.log</li><li>MpSigStub.log</li></ul></li><li>inf<ul><li>setupapi.ev1</li><li>setupapi.dev.log</li><li>setupapi.app.log</li></ul></li><li>Microsoft.NET<ul><li>Framework<ul><li>v4.0.30319<ul><li>ngen.log</li><li>ngen_service.log</li></ul></li></ul></li></ul></li><li>WindowsUpdate.log</li></ul></li><li>System Volume Information<ul><li>Syscache.hve</li><li>Syscache.hve.LOG1</li><li>{ebac27bb-7b10-11e6-a5bc-0800273c6b02}{3808876b-c176-4e48-b7ae-04046e6cc752}</li></ul></li><li>pagefile.sys</li><li>Users<ul><li>vagrant<ul><li>ntuser.dat.LOG1</li><li>NTUSER.DAT</li><li>AppData<ul><li>LocalLow<ul><li>Microsoft<ul><li>CryptnetUrlCache<ul><li>Content<ul><li>B912B2C6928A18B8CD7D50CF08BEA95B_87708DAABE1AF38B603CEFBE5F2B3276</li></ul></li><li>MetaData<ul><li>EDC238BFF48A31D55A97E1E93892934B_C20E0DA2D0F89FE526E1490F4A2EE5AB</li><li>B912B2C6928A18B8CD7D50CF08BEA95B_87708DAABE1AF38B603CEFBE5F2B3276</li><li>40E450F7CE13419A2CCC2A5445035A0A_97482851B9CF8FBB790FA8AEAB0C772D</li><li>C0018BB1B5834735BFA60CD063B31956</li><li>7396C420A8E1BC1DA97F1AF0D10BAD21</li><li>57C8EDB95DF3F0AD4EE2DC2B8CFD4157</li><li>DCE3BDBF5BDD86E2AB5B471CB90709B4_A7704BF276C97AA4D70879F611AA7DB9</li><li>37C951188967C8EB88D99893D9D191FE</li><li>C46E7B0F942663A1EDC8D9D6D7869173_42820CDFEA41DC84AAB89A6B63561873</li><li>21253908F3CB05D51B1C2DA8B681A785</li><li>FB788E090BC1F3AA2FBC9E8FB2859601</li><li>F90F18257CBB4D84216AC1E1F3BB2C76</li><li>696F3DE637E6DE85B458996D49D759AD</li></ul></li></ul></li></ul></li></ul></li><li>Roaming<ul><li>Microsoft<ul><li>Windows<ul><li>Recent<ul><li>CustomDestinations<ul><li>d93f411851d7c929.customDestinations-ms</li></ul></li><li>AutomaticDestinations<ul><li>7e4dca80246863e3.automaticDestinations-ms</li><li>1b4dd67f29cb1962.automaticDestinations-ms</li></ul></li></ul></li></ul></li></ul></li></ul></li><li>Local<ul><li>Microsoft<ul><li>Windows<ul><li>Explorer<ul><li>thumbcache_256.db</li><li>thumbcache_32.db</li><li>thumbcache_idx.db</li></ul></li><li>Temporary Internet Files<ul><li>counters.dat</li></ul></li><li>WebCache<ul><li>V01.log</li><li>WebCacheV01.dat</li><li>V01.chk</li></ul></li><li>UsrClass.dat</li><li>UsrClass.dat.LOG1</li><li>Caches<ul><li>cversions.1.db</li></ul></li></ul></li><li>Internet Explorer<ul><li>MSIMGSIZ.DAT</li><li>Tiles<ul><li>pin-2845162440<ul><li>msapplication.xml</li></ul></li></ul></li><li>Recovery<ul><li>High<ul><li>Last Active<ul><li>RecoveryStore.{AC08E291-7B19-11E6-917C-0800273C6B02}.dat</li></ul></li></ul></li></ul></li></ul></li><li>Feeds<ul><li>FeedsStore.feedsdb-ms</li><li>{5588ACFD-6436-411B-A5CE-666AE6A92D3D}~<ul><li>WebSlices~<ul><li>Suggested Sites~.feed-ms</li></ul></li></ul></li></ul></li><li>Media Player<ul><li>CurrentDatabase_372.wmdb</li></ul></li></ul></li><li>IconCache.db</li></ul></li></ul></li></ul></li><li>Public<ul><li>Libraries<ul><li>RecordedTV.library-ms</li></ul></li></ul></li></ul></li><li>ProgramData<ul><li>Microsoft<ul><li>Windows Defender<ul><li>Support<ul><li>MPLog-07132009-215552.log</li></ul></li><li>Scans<ul><li>History<ul><li>Service<ul><li>Unknown.Log</li></ul></li></ul></li></ul></li></ul></li><li>Search<ul><li>Data<ul><li>Applications<ul><li>Windows<ul><li>MSS.log</li><li>Windows.edb</li><li>GatherLogs<ul><li>SystemIndex<ul><li>SystemIndex.2.gthr</li><li>SystemIndex.2.Crwl</li><li>SystemIndex.1.Crwl</li><li>SystemIndex.1.gthr</li></ul></li></ul></li><li>MSS.chk</li><li>Projects<ul><li>SystemIndex<ul><li>PropMap<ul><li>CiPT0000.000</li></ul></li><li>SecStore<ul><li>CiST0000.002</li><li>CiST0000.001</li><li>CiST0000.000</li></ul></li><li>Indexer<ul><li>CiFiles<ul><li>CiAD0002.000</li><li>CiAD0002.001</li><li>00010001.ci</li><li>00010008.wid</li><li>00010004.wid</li><li>INDEX.002</li><li>INDEX.001</li><li>INDEX.000</li><li>00010001.dir</li><li>00010006.wid</li><li>CiAB0002.001</li><li>CiAB0002.000</li><li>CiAB0002.002</li><li>00010003.wid</li><li>CiAD0002.002</li><li>00010005.wid</li><li>00010007.ci</li><li>00010009.wid</li><li>00010005.ci</li><li>00010001.wid</li><li>00010005.dir</li><li>00010009.ci</li><li>00010007.wid</li><li>00010009.dir</li><li>00010002.wid</li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li>RAC<ul><li>PublishedData<ul><li>RacWmiDatabase.sdf</li></ul></li><li>StateData<ul><li>RacWmiEventData.dat</li><li>RacWmiDataBookmarks.dat</li><li>RacDatabase.sdf</li></ul></li></ul></li><li>Windows<ul><li>DRM<ul><li>drmstore.hds</li></ul></li></ul></li><li>Diagnosis<ul><li>ETLLogs<ul><li>ShutdownLogger<ul><li>AutoLogger-Diagtrack-Listener.etl</li></ul></li></ul></li><li>events01.rbs</li></ul></li><li>IlsCache<ul><li>ilrcache.xml</li><li>imcrcache.xml</li></ul></li><li>Network<ul><li>Downloader<ul><li>qmgr1.dat</li><li>qmgr0.dat</li></ul></li></ul></li></ul></li></ul></li></ul>"><ul class=".actual"><li>Windows<ul><li>setupact.log</li><li>Tasks<ul><li>SCHEDLGU.TXT</li></ul> .... etc.
My Javascript code:
<script>
$(function () {
$('button').on('click', function() {
$('.jstree').jstree();
});
});
</script>
My problem: When the dom of this UL/LI-list is being built and generated by Angular2, the jstree is not getting applied. Instead I receive a normal list.
I tried several ways, having the jstree also loaded on the document ready function, without success:
<script>
$(function () {
$(".jstree").jstree();
}
</script>
Appreciate any help or hint.
Thanks
If you really invoke the code like you shown, Angular app is not in the DOM yet when document ready is called. If you need to use a jQuery plugin inside Angular 2, you should invoke it in a component's ngOnInit. Refer here for sample angular2 component.

Can't attach jQuery Plugins that is inside {{#if}} in EmberJS

In my emberjs app. I have bunch of jquery plugins that I need to bind to various elements.
I am using this piece of code to initiate jquery plugins for elements.
App.ApplicationView = Ember.View.extend({
didInsertElement: function(){
window.appPluginsInit(); // all jquery plugin init
// chart client init
var chartClientSettings = {
serverUrl: config.ajaxUrl
};
this.$('.chart-client').chartClient(chartClientSettings);
}
});
This only works for element that are initially loaded to the page. But for example if an element is under {{#if}} it doesn't seem to be attached with plugins.
Works
<button class="chart-client">Show Chart</button>
Doesn't work
Considering the someVar is false on initial load.
{{#if someVar}}
<button class="chart-client">Show Chart</button>
{{/if}}
You could make your .chart-client element a component and init the plugin on the components didInsertElement.
Component template:
<script type="text/x-handlebars" id="components/chart-client">
Show Chart
</script>
Component:
App.ChartClientComponent = Ember.Component.extend({
classNames: ["chart-client"],
tagName: "button",
chartClientSettings = {
serverUrl: config.ajaxUrl
},
didInsertElement: function () {
this.$().chartClient(this.get("chartClientSettings"));
}
});
Application view:
{{#if someVar}}
{{chart-client}}
{{/if}}
JSBin example: http://emberjs.jsbin.com/wemujo/1/edit?html,css,js,output
The if is parsed after jQuery, delay the jQuery action:
setTimeout((function () {
this.$('.chart-client').chartClient(chartClientSettings);
}).bind(this), 1);
This should do the job.
The solution provided by #Pete TNT is the best but I see 2 other options:
1) instead of putting things in if block, you can probably just use css to show/hide the button. That way the ".chart-client" is always in the DOM tree and hence you can apply the plugin to the element.
<button {{bind-attr class=":chart-client someVar:show:hide"}}>Show Chart</button>
2) Add an observer(also as suggested by #Pete TNT) : http://emberjs.jsbin.com/jekuvixufo/1/
(I would not have posted this but I was already writing a jsbin so I thought why waste my effort.)

Ember.js load jquery on template render (no refresh)

I have created an ember.js template (about.hbs). I want to run some jQuery on the page but the jQuery only works if I reload the page.
I don't really get where I am meant to put the jQuery code to make it run when the template is rendered. At them moment I have put it in the controller.
App.AboutController = Ember.ObjectController.extend({
$(document).ready(function() {
//my jquery code
});
});
Could someone help me out?
You are going to want to lifecycle callbacks (see Ember docs). When a template is rendered Ember will trigger the didInsertElement callback. You can simply add your own code to this function, and if you want to use any jQuery inside of that callback you must keep the scope in mind: this.$()
Your code will look like this:
didInsertElement: function(){
this.$() //jquery code
}

How to wait until DOM has loaded before adding script tags to <head>?

I'm implementing this Developr theme from themeforest into a Meteor app.
I'm currently accomplishing this by placing the javascripts in question to /public and appending them using jQuery:
Meteor.startup(function() {
$('head').append('<script src="/template_stuff.js"></script>');
// .. all 7 scripts or so
});
If the required scripts are placed in /client/js/, it appears that they either run too early or before the DOM is done loading. If they are placed directly in the header of the main html file, they seem to bug out the same way.
Am I missing something here - is there a more elegant way to make the scripts load after DOM has loaded?
There are several methods for waiting until the DOM has loaded to inject your scripts:
Meteor.startup (as you illustrated)
jQuery's document ready: $(function () { ... })
script tag at the bottom of your layout template
Regarding elegance, I use a handlebars helper as it allows me to consolidate all 'after body' code in one place. Then use jQuery's document ready as needed.
For example,
// in client/handlebars.js
Handlebars.registerHelper('afterBody', function(name, options) {
function isMobileSafari() {
return navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
navigator.userAgent.match(/AppleWebKit/)
}
if (isMobileSafari()) {
$(function () {
FastClick.attach(document.body)
})
}
//// load scripts however you want...
// $(function () {
// $.getScript as Daniel suggests
// $('body').append as you have
// pure js: document.createElement('script')
// })
})
// in client/main.html (using mini-pages router)
<template name="layout_no_header">
{{{yield}}}
{{afterBody}}
</template>
<template name="layout">
{{> header}}
{{{yield}}}
{{afterBody}}
</template>
Use jQuery getScript()
(function ($) {
$.getScript("/template_stuff.js");
})(jQuery);
I think you might have a different problem. It sounds like the 3rd party code is being wrapped in a closure and is not working correctly. Try and place them inside the client/compatibility folder. This will prevent it from being wrapped in a closure, which can solve 3rd party problems. Be sure the load order inside of here is correct, it loads files in alphabetical order inside of a folder. (load order)
If that doesn't work, find out where the code is being executed and comment out the call. Then load your html inside of a template, even if it's just a 'page' template with all the html. Create a js file for the template and call the methods in the templates rendered callback.
// Execute this function when myPage template is rendered
Template.myPage.rendered = function() {
stuff.init();
stuff2.run();
};
Note, the to call stuff2, etc.. you'll likely need to have it's script in the compatibility folder so you can reach the namespaces from the template_stuff.js.

Backbone :: Using jQuery Plugins on Views

I'm having trouble figuring out a clean way to do this. Let's take for an example a code snippet from the example todo app that comes with backbone:
addOne: function(todo) {
var view = new TodoView({model: todo});
$("#todo-list").append(view.render().el);
},
So the ToDo view is being rendered and then it's being appended to #todo-list. But let's suppose we want to add a jQuery plugin to ToDo view. Where should we place the $(".todo").plugin() snippet? If we place it inside the ToDo view render function the HTML element is not set on the page, so the plugin won't 'latch' to any DOM element. If we place this inside the addOne function it will look ugly.
So, what's the best way?
The answer largely depends on the plugin you're talking about.
For example, most of the jQueryUI controls and the KendoUI controls allow you to call the plugin method from the render of the view, directly, before the HTML is attached to the DOM. You simply call it on the view's el.
For example, if I wanted to use KendoUI's menu on a view that generated:
Backbone.View.extend({
tagName: "ul",
render: function(){
var html = "<li>foo</li><li>bar</li>";
this.$el.html(html);
this.$el.kendoMenu();
}
});
There are some plugins that require the HTML to be a part of the DOM already, for whatever reason. In this case, I typically provide an onShow function in my views, and have the code that is displaying the view check for this and call it if it exists.
For example, there's a "Layout" plugin that I've used a few times. This plugin requires the HTML to be part of the DOM before it can work:
MyView = Backbone.View.extend({
render: function(){
var html = "generate some html here...";
this.$el.html(html);
},
onShow: function(){
this.$el.layout();
}
});
// .... some other place where the view is used
var view = new MyView();
view.render();
$("#someElement").html(view.el);
if (view.onShow) {
view.onShow();
}
FWIW: I've written the code for onShow and other common methods and events dozens of times, and have consolidated it all into a Backbone add-on called Backbone.Marionette, so that I don't have to write it anymore.
http://github.com/derickbailey/backbone.marionette
There's a lot more than just this available in this add-on, of course.
You can use the backbone $ method like so this.$('todo') to use context scoped jquery querying which will allow you to search in the current view DOM fragment which wasn't added to the document DOM tree yet.
From my experience adding jquery plugin binding in either render method or some kind of helper function if there was more custom bindings which would be then called from render method after the template was created.

Categories