I'm just started to develeop a web app with Durandal. I don't understand how call a function from a viewmodel and why if I find an element of my document it seems is not attached yet.
Example: viewmodel.js
define( ['libone', 'libtwo'], function () {
$('.carousel').libone({
expandbuttons: true,
keyboard: true,
mouse: true
});
});
It doesn't find the ID call carousel is why there's no view.hmtl content but index.html content.
Any ideas?
Thanks in advance
UPDATE
No errors but the view content is not returned.
view.html
<section>
<h2 data-bind="html:name"></h2>
<blockquote data-bind="html:descr"></blockquote>
<div class="carousel">
<div class="carousel-sections">
<div class="carousel-section"> ... some content ... </div>
</div>
</div>
<a id="carousel-scroll-prev" href="#"></a>
<a id="carousel-scroll-next" href="#"></a>
<section>
modelview.js
define( ['libone', 'libtwo'], function (libone, libtwo) {
var viewattached = function(view){
var view = $(view);
view.find('.carousel').libone({
expandbuttons: true,
keyboard: true,
mouse: true
});
};
var vm = {
attached: viewattached,
name: 'How about we start?',
descr: 'You have many choices to make and many roads to cross...'
};
return vm;
});
Only name, descr and scroll are shown but not carousel-section.
The rendering problem has been resolved using compositionComplete instead attached.
to gain access to the controls using jquery like you are requesting, you should use the views attached event
e.g.
define( ['libone', 'libtwo'], function (libone, libtwo) {
var viewattached = function(view){
var view = $(view);
view.find('.carousel').libone({
expandbuttons: true,
keyboard: true,
mouse: true
});
};
var vm = {
attached: viewattached
};
return vm;
});
The other one that may work will be the compsitionComplete..
compositionComplete works fine.But if you refresh the page ,composition complete skips the binding of element with the carousel and teh carousel doesnt work.
Any
Related
I have this simple HTML
<body>
<app-root></app-root>
</body>
I would like to create a loading overlay, using Material:
https://material.angular.io/cdk/overlay/overview
Should I do something like this:
<body>
<div id="foo" class="xyz">
<app-root></app-root>
</div>
</body>
and just toggle the class on the div with id="foo"? I can't figure out how to do an overlay the Material2 way, anybody know?
This guy's post here:
https://hassantariqblog.wordpress.com/2017/03/22/angular2-using-custom-loader-spinner-as-service-in-angular-2-application/
has all the answers.
I personally have one main event bus service. So put the displayOverlay() method in their. Otherwise followed his steps exactly and it worked fine.
Basically, you do this with router-outlet:
<router-outlet>
<span *ngIf="showLoader" class="loading"></span>
</router-outlet>
then in the component which controls the above html, do this:
constructor(private mds: MainDataService, private ref: ChangeDetectorRef) {
const self = this;
let to;
this.mySub = this.mds.status.subscribe((val: boolean) => {
self.showLoader = val;
clearTimeout(to);
to = setTimeout(function () {
self.ref.detectChanges();
}, 100);
});
}
so in your main data bus service, just call:
displayOverlay(value: boolean) {
this.status.next(value);
}
Admittedly "status" is not the right property name, but I will leave it to be the same name as the examples form the article.
I'm using the Articles and Users implementation into Meanjs built-in app.
List of articles (View) with the button for every item:
<a data-ng-controller="MyArticlesController" data-ng-repeat="article in articles" class="list-group-item">
<button data-ng-click="addArt2me()" class="glyphicon glyphicon-plus addArt2me" ></button>
<h4 class="list-group-item-heading" data-ng-bind="article.title"></h4>
<p> {{article.content | limitTo:140}} </p>
</a>
And here the controller with the trigger function $scope.addArt2me():
'use strict';
angular.module('users').controller('MyArticlesController', ['$scope', 'Articles', 'Users', '$location',
function($scope, Articles, Users, $location) {
var myUser = new Users($scope.user);
$scope.addArt2me = function() {
var myArticle = new Articles($scope.article);
myUser.userArticles.push(myArticle._id);
myUser.$update(function(response) {
console.log("Actualize!! con : " + user.userArticles.length + "__" + response);
}, function(errorResponse) {
console.log("updatError: " + errorResponse);
$scope.error = errorResponse;
});
}
}
]);
In the user's model I've an array of articles._id userArticles.
The View renders a list of articles with a button that triggers the function addArt2me() in the controller, which pushes and updates the myArticle._id inside ´userArticles´.
It works successfully and saves the element into DB :)
console: Actualize!! con : 60__[object Object]
...but only the first time, the next time it triggers an error :(
PUT http://localhost:3000/users 400 (Bad Request)
updatError: [object Object]´
Do I need to deal with some kind of service to update the USERS module being in ARTICLES module?
Can't I just update the model of the user with Mongoose?
Why does it works well for the first saved article ?
Any guide is very appreciated. Thanks!
I just founded, after 2 day of looking for it.
Needed to declare the User Model, outside the subcontroller because it iterates for every article.
so move ´$scope.myUser = new Users($scope.user);´ into ´ArticlesController´ Did the job!
Thanks for your time!
I have a problem with bootstrap modal window when using AngularJS together with NodeJS and socket.io. I have been googling and it seems like it is issue that has a solution, but for some reason it doesn't work when I am trying to implement it together with Socket.io. I used modals on two different places - when I click on a static div (works perfectly), when I receive a message from webSockets (opens only once and then nothing). I guess I might have a problem in my JS code since the modal when I click on a static div works fine, but I don't know.
I have an address and I am sending some data via WebSockets to the client when this link is visited. The client event looks like this:
socket.on('patient', function(data){
modalInstance = $modal.open({
templateUrl: 'templates/patient.js',
controller: 'patientModalCtrl',
resolve: {
details: function(){return data;}
}
});
});
and:
socket.on('alergy',function(data){
modalInstance = $modal.open({
templateUrl: "templates/alergy.js",
controller: 'alergyModalCtrl'
});
});
Both of these work only once and then the modal window stops to appear. Interesting is, that when I emit "alergy", then again and then "patient" I get an "alergy" window and then patient window the second "alergy" window under it.
emiting looks like this:
app.get('/api/socket/hash/:hash', function(req, res){
var hash = req.params.hash;
//allergy
if(hash === "3fDecCD"){
connected_sockets[0].emit('alergy', {alergy: true});
res.json({status: true});
}
//patient detail
else if(hash === "Vc43Sf"){
connected_sockets[0].emit('patient', {name: 'Jan', surname: 'Bjornstad'});
res.json({status: true});
}
else{
res.json({status: false});
}
});
My template looks like this:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body" style="background-color: #FFD1D1;">
<h1 style="text-align: center; color: red;">Allergy!</h1>
<h2 style="text-align: center; color: red;">The patient is allergic to opium!</h2>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</div>
</div>
I am using AngularJS 1.0.7, Bootstrap CSS 2.3.1
I would say that your socket-event listeners are firing "outside of AngularJS world" and as such AngularJS machinery is not kicking-in to do its 2-way data binding "magic". In precise terms, you are not entering AngularJS $digest loop so bindings are not updated, promises not resolved etc.
The easy fix is to wrap calls to AngularJS-specific code (here - call to the $modal service) into Scope.$apply method, ex.:
socket.on('alergy',function(data){
$scope.$apply(function(){
modalInstance = $modal.open({
templateUrl: "templates/alergy.js",
controller: 'alergyModalCtrl'
});
});
});
I am creating an application to get some experience in jQuery Mobile and backbone. I have made a "restful" API with node.js that handles the data I need. It works fine with all my static pages I made in index.html. But when I need to create a page with data from a certain id I am a bit lost.
For example when I want to display all items(/items) I have a data-role=page with id items that list all items, but when I need to go to a detailed page for each item (/items/1) i want to create that details page whenever a user wants details on an item, in other words when a user visit the url spots#3 for example.
Is this possible?
my router: the model gives me all data i want
Spoter.Router = Backbone.Router.extend({
routes: {
"": "",
"spot#:id": "spotDetails"
},
//Details on a certain spot with id
spotDetails: function(id) {
var spotDetailsContentDiv = Spoter.spotDetailsContent;
spotDetailsContentDiv.empty();
var spot = new Spoter.spotModel({id: id});
spot.fetch({
successCallback: function(data) {
var spotDetailsView = new Spoter.spotDetailsView({
model: data
});
spotDetailsContentDiv.html(spotDetailsView.render().el);
}
});
}
});
View:
Spoter.spotDetailsView = Backbone.View.extend({
render:function () {
this.$el.html(this.template(this.model));
return this;
}
});
Template with underscore
<ul data-role="listview" data-theme="c" data-inset="true">
<li>
<a href="#">
<h1><%= this.model.name %></h1>
<p><%= this.model.description %></p>
</a>
</li>
</ul>
I am trying to integrate Stripe "Pay with Card" checkout into backbone Node environment. On the server side, I am using Stripe Node code - that part works good. However, on the client side, I am unable to capture the event.
I would like to capture the submit event from the Stripe popup to call "paymentcharge" method in the view.
Here is my code:
<!-- Stripe Payments Form Template -->
<form id="stripepaymentform" class="paymentformclass">
<script
src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
data-key="pk_test_xxxxxxxxxxxxx"
data-amount="0299"
data-name="MyDemo"
data-description="charge for something"
data-image="assets\ico\icon-72.png">
</script>
</form>
Backbone View Class
myprog.PaymentPanelView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
$(this.el).html(this.template());
return this;
},
events : {
"submit" : "paymentcharge"
},
paymentcharge : function( event) {
this.model.set({stripeToken: stripeToken});
}
});
Backbone Model Class
var PaymentChargeModel = Backbone.Model.extend({
url: function(){
return '/api/paymentcharge';
},
defaults: {
}
})
Setup/Call the View from header menu event
if (!this.paymentPanelView) {
this.paymentPanelView = new PaymentPanelView({model: new PaymentChargeModel()});
}
$('#content').html(this.paymentPanelView.el);
this.paymentPanelView.delegateEvents();
this.selectMenuItem('payment-menu');
I think the problem has to do with your View's el and the event you are listening for.
You never explicitly define your View's el, which means it gets initialized to a detached <div> element. You then use your template to fill that <div> with the form element from the template. Even though your <div> is detached, you get to see the content, because you add the content of you el to #content using jquery.
I think the problem is that you are listening for a submit event on the <div> in your el, not the contained <form>. Try changing your events hash to this:
events: {
'submit form#stripepaymentform': 'paymentcharge'
}
Basically, listen for events on the contained element like in jquery's .on. You can also go right to a button click, something like this:
'click #mysubmitbutton': 'paymentcharge'
Hope this helps!