Is there a way to render a precompiled template that has no name on the client side in DustJs?
Because documentation only shows with a name:
<!-- precompiled templates -->
<script type="text/javascript" src="/lib/templates.js"></script>
<script type="text/javascript">
// The templates are already registered, so we are ready to render!
dust.render('hello', { world: "Saturn" }, function(err, out) {
document.getElementById('output').textContent = out;
})
</script>
EDIT : Ok it's probably too complicated to load a file, and I just noticed that when we compile without specifying name (in order to compile many template simultaneously), the path of the template is set as the default name. It is even editable with --pwd flag.
There is therefore always a name so the above function can operate.
It sounds like you would like to load templates by their path after they have been precompiled. Dust allows you to do this via AMD (require.js) compatibility.
http://www.dustjs.com/guides/setup/#amd
Once you've loaded require.js and set define.amd.dust = true, you can call dust.render with the path to a template and Dust will automatically load it for you.
Note that this requires that you compile your templates with the --amd flag.
<script src="r.js"></script>
<script type="text/javascript">
define.amd.dust = true;
require(["lib/dust-full"], function(dust) {
dust.render('path/to/your/template', function(err, out) { ... });
});
</script>
The Dust repository has an example of using AMD to load templates.
Related
I've recently added WebPack 5 to my build process in my .NET Core MVC 7 application.
My goal is to be able to call my javascript functions from the javascript files WebPack generates inside my views.
I have a simple Index.cshtml file that includes a partial view and the generated javascript from webpack:
Index.cshtml
<div>
#await Html.PartialAsync("SettingsTab")
</div>
#section Scripts
{
<script defer src="~/dist/settings.entry.js"></script>
}
The SettingsTab constains a button that is trying to trigger a method from the settings.entry.js file:
SettingsTab.cshtml
<div>
<button type="button" onclick="saveProfileSettings()">Save Profile</button>
</div>
The settings.js file before webpack bundles it into the dist folder looks like this:
settings.js
import ('../css/settings.css')
function saveProfileSettings() {
// do stuff
}
When I wasn't using webpack I could directly call this function like I am trying to above.
However now when I reference the bundled js file it cannot call it.
Looking at the end of the settings.entry.js file it looks like webpack has bundled my code into an IIFE:
End of settings.entry.js
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
// omitted contents of settings.js
})();
/******/ })()
;
I would like to instruct WebPack not to wrap my code like this so I can directly call the functions elsewhere.
Now I did find out that I can use library in my webpack.config.js like so:
output: {
filename: "[name].entry.js",
path: path.resolve('wwwroot', 'dist'),
publicPath: "/dist/",
library: ['WebPack', '[name]']
},
With this I can successfully reference my functions using WebPack.settings.saveProfileSettings() but I do not want to do this. I want to be able to reference my functions directly as saveProfileSettings().
How can I change how WebPack packs my code so I can do this?
Using ZURB Foundation Template, building with NPM.
I have the following code in my default.html layout page:
<script src="{{root}}assets/js/app.js"></script>
{{#ifpage 'admin'}}
<script src="{{root}}assets/js/single-page/admin.js"></script>
{{/ifpage}}
{{#ifpage 'dashboard'}}
<script src="{{root}}assets/js/single-page/dashboard.js"></script>
{{/ifpage}}
In gulpfile.js I have as a member of the 'javascript' PATHS array:
'!src/assets/js/single-page/**/*'
I then, do:
gulp.task('single-page', function() {
return gulp.src('src/assets/js/single-page/**/*')
.pipe(gulp.dest('dist/assets/js/single-page'))
.on('finish', browser.reload);
});
Then...
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'single-page', 'images', 'php', 'chart_data', 'copy'], 'styleguide', done);
});
And finally...
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/js/single-page/**/*.js'], ['single-page']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/assets/php/**/*'], ['php']);
gulp.watch(['src/assets/chart_data/**/*'], ['chart_data']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
My three pages are all PHP pages with the names index.php, admin.php, and dashboard.php. The js/single-page directory is being written to the dist folder and the two JS files are there.
The Panini conditional doesn't seem to be working so the admin-specific and dashboard-specific paths do not appear on their respective PHP pages.
Colin Marshall in his answer to How to add JavaScript just for one specific page? mentions a config.yml file and a gulpfile.babel.js file, neither of which are in my project's directory.
Any suggestions?
Thank you.
Simple fix after a bit of fiddling. Seems Panini 'page' var returned the full page name including .php. Once I checked for admin.php or dashboard.php all worked fine.
I can only imagine there's some code change I can make to return the page name without the file extension.
I have a asp.net mvc app . In Scripts I have the subfolder app containing Controller.js. I also have another subfolder Spec containint ControllerSpec.js - written with jasmine.
describe('PhoneCat controllers', function () {
beforeEach(module('phonecatApp'));
describe('PhoneListCtrl', function () {
it('should create "phones" model with 3 phones', inject(function ($controller) {
var scope = {},
ctrl = $controller('PhoneListCtrl', { $scope: scope });
expect(scope.phones.length).toBe(3);
}));
});
});
In SpecRunner.cshtml i have just included this files:
<script type="text/javascript" src="/Scripts/app/controllers.js"></script>
<script type="text/javascript" src="/Scripts/Spec/controllersSpec.js"></script>
In karma init, I have added the path of those 2.js.
Can you please tell me how can I do to make it work? If I run vs the Jasmine code it's ok.
Thx
You must add a reference to angular.js as well
There could be a variety of reasons for such an error, so it would help to solve with a bit more info on your part.
However off hand and having seen this error before in my battles through angular unit testing, I have to ask are you including a link to angular-mocks.js?
The lastest repo: http://code.angularjs.org/1.2.15/
Angular Mocks: http://code.angularjs.org/1.2.15/angular-mocks.js
A copy of your karma.conf.js would also help....
I am creating a dynamic tab/contentPane as below in home.xhtml file and i am trying to call a function display which is present in order.xhtml,its not getting called. what ever java script is there in order.xhtml is not getting loaded.
In home.xhtml
if(dijit.byId('ordersummary')!=null){
dijit.byId('ordersummary').destroy();
}
newTab= new dijit.layout.ContentPane({
id : 'ordersummary',
title : 'Order Summary',
href : 'order.xhtml',
closable : true
});
dijit.byId('tabContainer').addChild(newTab);
dijit.byId('tabContainer').selectChild(dijit.byId("ordersummary"));
javascript in order.xhtml
<script type="text/javascript">
//<![CDATA[
function display(){
alert(" I M BEING CALLED");
}
</script>
There are two ways about this, either a make the script type dojo/method.
Or use the extended dojox/layout/ContentPane.
http://livedocs.dojotoolkit.org/dijit/layout/ContentPane#executing-javascript-inside-contentpane
While I'm not familiar with the dojo toolkit, I think you should put the JavaScript function in the main file or load the JavaScript dynamically like;
How do I include a JavaScript file in another JavaScript file?
dijit.layout.ContentPane will not support javascript,i mean it will not execute the javascript content in the input file.
dojox.layout.ContentPane is advanced one and it will support javascript.
I'm using update panel, my response have some javascript like bellow. After a success response, I need to eval it, load it (with external script)
ex: my html response
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
alert('asd');
</script>
<div>test</div>
<div>blah blah blah</div>
I'm not sure whether this question is still important for you, however I will try to provide a reasonable answer below.
AJAX framework does not evaluate scripts which are returned via UpdatePanel calls. You have to re-attach external scripts to document, so that browser could request for them and evaluate all inline scripts. You can use a small module I have paste below.
var UpdatePanelEnhancer = function ()
{
var divSelector = '#liveArea';
function evaluateScripts()
{
$(divSelector).find('script').each(function ()
{
if (this.src)
{
$('body').append(this);
}
else
{
var content = $(this).html();
eval(content);
}
});
};
Sys.Application.add_load(evaluateScripts);
} ();
The weak part of it is that you have to provide a selector for the element where module should look for a scripts to evaluate ('liveArea' in example), although you can extend the module and provide some cinfiguration to it. Also, I would strongly recommend you to load external javascripts before. If you cannot do it for some reason you should additionally check whether script is already referenced or not to avoid necessary calls and potentially unexpected behaviors and errors .