I am working with durandal, and I am using shadowbox plugin "http://shadowbox-js.com/" to view image in a popup
to make it work according to shadowbox documention I have to call:
Shadowbox.init();
so I added it in attached event, but it doesn't work 'may be because the images are not loaded yet'
any solution to make it work??
Try using the composition complete lifecycle callback. See here for more information: http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks.html#combined-lifecycle
Everything works with Durandal. Durandal has nothing to do with it. What you should do is download Shadowbox's jQuery adapter. That approach is more appropriate under Durandal. Take a look at the link here.
Once you have the jQuery adapter in place, writing a quick custom Knockout binding is a breeze. Then, you can call upon Shadowbox declaratively, in your HTML, using the viewModel to configure it.
Related
since express js doesn't allow Dom related commands, so I am not able to keep tracks of buttons i.e. when they are clicked. Not just button clicking but any kind of tracking is not possible. Can anyone please suggest a alternate for this. If there is nothing in express, a new library or anything that can work with express and help me with this. Thank you
You are confusing things here. Express.js runs on the backend. There is no DOM on the backend, hence there is no API to manipulate the DOM.
You can use template engines (express supports e.g. handlebars and EJS) and link JavaScript files within the HTML that you return. Or you use a frontend framework like React, Vue, Svelte, Angular etc. in order to do this.
We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)
In learning the awesome Aurelia framework, I have learnt that you can use the following composition techniques however I am not sure what would be the difference.
<compose view="./nav-bar.html"></compose>
or
<require from="./nav-bar.html"></require>
Any clarification is appreciated.
<require> imports resources that you want to use in the view. It's conceptually similar to a require() JavaScript call in AMD or CommonJS module code (or an import statement in ES6 code). You would use <require> to import a custom element or custom attribute that you wanted to use in your view. You'll still need to explicitly render it like <nav-bar></nav-bar>.
<compose> renders the specified view.
We will use already created templates in our app and we need to use in the current app via require.
you can use css and javscript files also in require.
But from compose you can render your views by giving your view modal name.
You can see this link to have a better idea about compose.
http://patrickwalters.net/best-parts-of-aurelia-1-composing-custom-elements-templates/
The code to embed the widget is nice and simple, but it includes javascript in tags.
Durandal appears to strip out such script tags.
How do I use the embed code in a Durandal view?
https://dev.twitter.com/web/embedded-timelines
<a class="twitter-timeline" href="https://twitter.com/XXX" data-widget-id="XXX">Tweets by #XXX</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
You would need to write a custom Knockout binding, or create a Durandal widget where the view is your tag, and the viewModel handles the JavaScript in your tag.
Some notes: In your widget's view model, you would avoid d.getElementsByTagName(s) in favor of simply referencing the view reference passed in to either the attached or compositionComplete handler that Durandal provides. In fact, you could pretty much eschew all direct DOM manipulation in favor of Durandal's imported view references and Knockout's/Durandal's templating/composition.
UPDATE
Take a look at this from the documentation you reference: "If you’re already including our ‘widgets.js’ JavaScript in your page to show embedded Tweets or Twitter buttons, you don’t need to include this script again; it updates automatically to support new features."
This could lead you down the path of simply referencing widgets.js in a script tag in your index.html or index.chtml file.
You cannot use script tags in Durandal views, but you can use them in your index page.
SECOND UPDATE
Once widget.js has been referenced in a script tag in the index.html or index.chtml (or perhaps even by using AMD), it becomes a matter of choosing the proper Durandal point at which to load the Twitter widget. This could be either in the attached handler or in the compositionComplete handler, as indicated above.
As the OP pointed out in his comments, a functional place to do this is compositionComplete, in the following manner:
var compositionComplete = function () {
twttr.widgets.load();
}
as documented here.
This assumes that twttr is either on the window or injected into the viewModel.
POSSIBLE MEMORY LEAK
It is equally important to note that unloading of widgets must take place in the Durandal's detached handler. Use Twitter's API to unload, and then be sure to nullify the windows reference.
I'm developing a custom Dojo widget which in fact acts as a wrapper for Timeline JS library (http://www.simile-widgets.org/timeline/).
Is there a possibility to include the required JS code for Timeline in the custom dojo widget or must I include manually in my "index.html"??
Thanks in advance.
Do you have control over the Timeline source code, that is, are you hosting it yourself?
If this is the case you could turn the dependency into a dojo module by inserting an appropriate dojo.provide call on the top or you could just straight up copy-and-paste everything inside your MyWidget.js source file.
If this is all ends up too compicated for you to consider it worth it, adding the script tag by hand on the index.html is not that bad (given how base Javascript actually doesn't have a real module system you could use instead)