I installed aurelia-dialog npm install aurelia-dialog --save. Which installed the version "version": "2.0.0-rc.3".
I modified main.ts by adding .plugin(PLATFORM.moduleName('aurelia-dialog')) ;
to aurelia.use in configure function.
I added
"dependencies": [
{
"name": "aurelia-dialog",
"path": "../node_modules/aurelia-dialog/dist/amd",
"main": "aurelia-dialog",
"resources": ["resources/*.js"]
}
]
in aurelia.json (so, I'm not sure it's usefull).
Then here is a module used to call the dialog :
import {DialogService} from 'aurelia-dialog';
import {Rapport} from '../modal/rapport';
#inject(CssAnimator,
EventAggregator,
Parameters,
Configurator,
NewInstance.of(ValidationController),
Validator,
Router,
NewInstance.of(HttpClient),
DialogService
)
export class Import {
constructor(private cssAnim: CssAnimator,
private ea: EventAggregator,
private params: Parameters,
private conf: Configurator,
private controller: ValidationController,
private validator: Validator,
private router: Router,
private httpClient: HttpClient,
private dialogService: DialogService) {
...
}
...
test(){
let testResponse='{"FATAL":["1 ca craint !", "2","3","4"],"WARN":["w1", "w2","w3"],"INFO":["i1","i2","i3"]}';
this.dialogService.open({
viewModel: Rapport,
model:testResponse
}).whenClosed(reponse => {
console.log("Rapport lu :) + ["+reponse.output+"]");
});
}
My Rapport VM :
import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';
#inject(DialogController)
export class Rapport {
fatals: string[]=[];
warns: string[]=[];
infos: string[]=[];
constructor(private controller: DialogController) {
controller.settings.centerHorizontalOnly = true;
}
activate(rapportJson) {
let rapport = JSON.parse(rapportJson);
this.fatals = rapport.FATAL;
console.log("fatals :"+this.fatals);
this.warns = rapport.WARN;
console.log("warns :"+this.warns);
this.infos = rapport.INFO;
console.log("infos :"+this.infos);
}
}
My view :
<template>
<!-- <ux-dialog> -->
<!-- <ux-dialog-body> -->
<!-- <h2>Erreurs fatales : </h2> -->
<!-- <ul> -->
<!-- <li repeat.for="f of fatals"><span>${f}</span></li> -->
<!-- </ul> -->
<!-- <h2>Avertissements : </h2> -->
<!-- <ul> -->
<!-- <li repeat.for="w of warns"><span>${w}</span></li> -->
<!-- </ul> -->
<!-- <h2>Pour information : </h2> -->
<!-- <ul> -->
<!-- <li repeat.for="i of infos"><span>${i}</span></li> -->
<!-- </ul> -->
<!-- </ux-dialog-body> -->
<!-- <ux-dialog-footer> -->
<!-- <button class="btn btn-success" click.delegate="controller.ok()" >Ok</button> -->
<!-- </ux-dialog-footer> -->
<!-- </ux-dialog> -->
</template>
Everything in commented but without this it doesn't work the same :(
When I click on the button test (see class Import), then nothing appends and I have these traces :
fatals :1 ca craint !,2,3,4 rapport:27:9
warns :w1,w2,w3 rapport:29:9
infos :i1,i2,i3 rapport:31:9
DEBUG [templating] importing resources for modal/rapport.html Array [ ] aurelia-logging-console:20:6
Unhandled rejection Error: BindingLanguage must implement inspectTextContent().
mi#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:892:9
inspectTextContent#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:909:5
_compileNode#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:2824:26
_compileNode#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:2844:26
compile#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:2791:5
loadViewFactory/</registryEntry.onReady<#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:3518:27
From previous event:
loadViewFactory/<#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:3511:31
From previous event:
loadViewFactory#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:3493:12
loadViewFactory#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:617:12
load#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:4274:14
createController/<#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:4883:14
From previous event:
createController#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:4871:12
_createControllerAndSwap#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:4843:12
compose#webpack-internal:///./node_modules/aurelia-dialog/node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:4945:14
DialogService.prototype.composeAndShowDialog#webpack-internal:///./node_modules/aurelia-dialog/dist/native-modules/dialog-service.js:79:16
DialogService.prototype.open/openResult<#webpack-internal:///./node_modules/aurelia-dialog/dist/native-modules/dialog-service.js:141:20
From previous event:
DialogService.prototype.open#webpack-internal:///./node_modules/aurelia-
dialog/dist/native-modules/dialog-service.js:131:26
Import.prototype.test#webpack-internal:///import/import:279:9
evaluate#webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:1578:14
callSource#webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:5269:18
handleEvent#webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:5278:5
handleDelegatedEvent#webpack-internal:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js:3353:11
What's wrong ? I can't find any answer in Aurelia blog or anywhere else ...
You know what ?
I made npm install -g aurelia-cli ; it updates Aurelia.
In another directory, I made a au new and then installed all packages that I need (included aurelia-dialog). Copy/paste all src files from the previous place, and ... it works !!
So if you have trouble with Aurelia-dialog (and other plugins, I guess) be sure Aurelia is updated to the last version. Hope my loss of time will help someone else not to loose his time ...
Related
I have a view that launches a confirmation dialog but instead of waiting for the dialog to return with a result, the code jumps straight to the 'then' portion of the promise. See code below:
ConfirmDialog.ts
import { inject } from 'aurelia-framework';
import { DialogController } from 'aurelia-dialog';
#inject(DialogController)
export class ConfirmDialog {
private message: string;
private controller: DialogController;
constructor(controller: DialogController) {
this.controller = controller;
}
public activate(message: string) {
this.message = message;
}
}
ConfirmDialog.html
<template>
<div tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" click.trigger="controller.cancel()" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
${message}?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" click.trigger="controller.cancel()">No!</button>
<button type="button" class="btn btn-danger" click.trigger="controller.ok()">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
SomeView.ts
import * as moment from 'moment';
import { inject, singleton } from 'aurelia-framework';
import { DialogService } from 'aurelia-dialog';
import { ConfirmDialog } from '../components/modal/confirmDialog';
import { InfoDialog } from '../components/modal/infoDialog';
import { StateStore } from '../common/StateStore';
import { Routing } from '../common/routing';
#singleton()
#inject(Routing, StateStore, DialogService)
export class SomeView {
private routing: Routing;
private commonState: StateStore;
private dialogService: DialogService;
constructor(routing: Routing, stateStore: StateStore, dialogService: DialogService) {
this.routing = routing;
this.commonState = stateStore;
this.dialogService = dialogService;
}
public someButtonClickHandler(someArg: SomeType) {
if (!this.routing.auth.authenticated) {
this.routing.router.navigate('#/login');
}
this.dialogService.open({
viewModel: ConfirmDialog,
model:
'Do you wish to continue'
}).then((response) => {
if (response.wasCancelled) {
return;
}
this.dialogService.open({
viewModel: InfoDialog,
model: 'Why is this happening..'
});
});
}
}
I have omitted the html for the view since it works and all bindings are firing correctly. This used to work, I updated the aurelia-bundler which caused a runtime error so I reverted back to a previous version of the bundler. The runtime error stopped but now it seems that Promise is being short circuited. I even tried checking out the project from version control and this keeps happening. Tried clearing the browser cache in case something was wrong there but no matter what I do, the "why is this happening..." always shows before any interaction can happen with the confirmation dialog. When I click 'ok' on the InfoDialog, the confirmation dialog is there underneath and clicking cancel or OK subsequently does nothing.
Any help would be appreciated.
This is most likely because of breaking changes in the aurelia-dialog between beta and RC.
Try changing this.dialogService.open({...}).then(...) to this.dialogService.open({...}).whenClosed().then(...).
See the release notes for RC-1: https://github.com/aurelia/dialog/releases/tag/1.0.0-rc.1.
There's also a blog post in Aurelia blog: http://blog.aurelia.io/2017/04/27/aurelia-dialog-release-candidate/
I am successfully rendering mvc view when it comes to render the normal aurelia class as below:
export class App {
getViewStrategy() {
return 'app';
}
}
How would I render my razor view when using custom element basic example is I got a nav-bar.html which is getting use to render my menu but instead of nav-bar.html I want to use cshtml page so that I can use some server side code to hide and show few elements. If I just do following
<template>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
....
</nav>
</template>
And in corresponding nav-bar.ts
import {bindable} from 'aurelia-framework';
export class NavBar {
#bindable router;
constructor() {
console.info("Ctor");
}
bind() {
console.info("bind");
}
getViewStrategy() {
console.log('get view');
return 'nav-bar'
}
}
And use it like, in my app.cshtml. One thing to note if I change from="nav-bar" to nav-bar.cshtml and get rid of nav-bar.ts file aurelia expect nav-bar.js all the time as it only care for js and html file
<template>
<require from="nav-bar"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
In this case my Ctor and bind is logging but get view doesn't which mean i cannot use server side view or is there any way around it?
Use the #useView decorator.
navbar.js
import { useView } from 'aurelia-framework';
#useView('navbar.cshtml')
export class NavBarCustomElement {
// ...
}
app.html
<require from="nav-bar"></require>
<nav-bar></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
Working example here: https://gist.run/?id=8f3b972d4008f07c1a11142b4b5b6e0e
I am building an web application in which react-router is used. When i hit the url localhost:8080/user it works fine. When i hit localhost:8080/user/login it not works and console show unexpected tokken > what does it means? I could not understand the problem.
One more thing in this line of code when i changed to any other class then also its not working .
Routes.js
import React from 'react';
import UserBase from './UserBase.js';
import Dashboard from './Dashboard.js';
import Login from './Login.js';
// var ReactRouter = require('react-router');
// var Router = ReactRouter.Router;
// var Route = ReactRouter.Route;
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
var Routes = (
<Router history={browserHistory}>
<Route path="/" component={Login}/>
<Route path="user" component={UserBase}>
<IndexRoute component={Dashboard} />
<Route path="login" component={Login}/>
</Route>
</Router>
);
module.exports = Routes;
Login.js
import React from 'react';
class Login extends React.Component{
constructor(){
super();
}
render(){
return (
<div className="login">
<a className="hiddenanchor" id="signup"></a>
<a className="hiddenanchor" id="signin"></a>
<div className="login_wrapper">
<div className="animate form login_form">
<section className="login_content">
<form>
<h1>Login Form</h1>
</form>
</section>
</div>
<div id="register" className="animate form registration_form">
<section className="login_content">
<form>
<h1>Create Account</h1>
</form>
</section>
</div>
</div>
</div>
);
}
}
export default Login;
Routes js is working fine if I remove 'history={browserHistory}' means that if I use ugly url i.e. used with #. If I hit http://localhost:8080/#/user/login?_k=jtorvg is working fine then what will be the issue?
I use node server and express package to serve for every request.
var app = express();
app.use('/', express.static(path.join(__dirname, 'public')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
webpack.config.js
module.exports = {
entry: "./app/components/EntryPoint.js",
output: {
filename:"public/bundle.js"
},
module : {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
Yes. I got the answer after struggling of hours a very small mistake. At index page bundle.js script path has to be changed for the url like localhost:8080/user/dashboard.
Just add <script src="/bundle.js" /> instead of <script src="bundle.js" />
i'm using Stripe plugin for Grails ,Grails version 2.5.1 i can't make any successful transaction i always get There was an error processing your credit card. as shown in the controller , i noticed that Charge method is not defined as shown in the screenshot
i tried to import com.stripe.Stripe but i'm getting unable to resolve class com.stripe.Stripe.
Here is the action:
def charge(String stripeToken, Double amount) {
//Stripe.apiKey = grailsApplication.config.grails.plugins.stripe.secretKey
def amountInCents = (amount * 100) as Integer
def chargeParams = [
'amount': amountInCents,
'currency': 'usd',
'card': stripeToken,
'description': 'customer#sample.org'
]
def status
try {
Charge.create(chargeParams)
status = 'Your purchase was successful.'
} catch(CardException) {
status = 'There was an error processing your credit card.'
}
redirect(action: "confirmation", params: [msg: status])
return
}
The question was about Grails 2.5.x. The plug-in is not available for Grails 3.x.x. I got it working and posted an online tutorial. There is a full, working Grails 3.2.3 application available for download. It also implements a shopping cart. The page is: http://www.databaseapplications.com.au/stripe_payments.jsp
Try this,
In build config add:
plugins {
...
compile "org.grails.plugins:stripe:2.8"
...
}
In your controller:
package stripesample
import com.stripe.model.Charge
import com.stripe.exception.CardException;
class CheckoutController {
def index() {}
def charge(String stripeToken, Double amount) {
def amountInCents = (amount * 100) as Integer
def chargeParams = [
'amount': amountInCents,
'currency': 'usd',
'card': stripeToken,
'description': 'customer#sample.org'
]
def status
Charge chargeStatus
try {
chargeStatus = Charge.create(chargeParams)
println chargeStatus
status = 'Your purchase was successful.'
} catch(CardException) {
println status
status = 'There was an error processing your credit card.'
}
render view: "confirmation", model:[msg: status,chargeObject:chargeStatus]
return
}
}
In your main layout file:
<html>
<head>
<g:javascript src="stripe-v2.js" />
<r:layoutResources/>
</head>
<body>
<g:layoutBody/>
<r:layoutResources/>
</body>
</html>
In your credit card form View:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<h3>Checkout</h3>
<stripe:script formName="payment-form"/>
<g:form controller="checkout" action="charge" method="POST" name="payment-form">
<div class="payment-errors"></div>
<div class="form-row">
<label>Amount (USD)</label>
<input type="text" size="20" autocomplete="off" id="amount" name="amount"/>
</div>
<stripe:creditCardInputs cssClass="form-row"/>
<button type="submit">Submit Payment</button>
</g:form>
</div>
</body>
</html>
Create another view in the same controller folder in my case checkout/confirmation.gsp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Checkout</h3>
<p>${msg}</p>
<p>Data: </p>
<p>${chargeObject}</p>
</body>
</html>
Run grails clean
and then,
Run grails run-app
If you need to test a sample app you can clone my app here: Sample App
i did "refresh dependencies" in eclipse , and all worked fine
I'll keep it short. My view model looks like this:
var ViewModel = {
Cameras: ko.observableArray(),
Current: ko.observableArray()
};
and I want to do something like this:
<!-- ko foreach: Cameras -->
<div data-role="collapsible">
<h3 data-bind="text: CameraName"></h3>
<!-- ko foreach: Current -->
<img data-bind="attr: { src: URL }" />
<!-- /ko -->
</div>
<!-- /ko -->
CameraName property is from Cameras array and URL property is from Current array, but when I do this I get "Current is not defined". I've looked into nested foreach but there must be something I'm not understanding properly.
Current has to be a property of the item in Cameras.
Like so...
var Camera = function() {
this.Current = ...
}
You could try Knockout 2.1's $parent.
<!-- ko foreach: Cameras -->
<div data-role="collapsible">
<h3 data-bind="text: CameraName"></h3>
<!-- ko foreach: $parent.Current -->
<img data-bind="attr: { src: URL }" />
<!-- /ko -->
</div>
<!-- /ko -->