I was surprised that I didn't find any help in the documentation or a blog post about this.
I'm trying to add tests to make sure the eventing is setup correctly and stays that way.
The durandal app and events objects from Require are null. So there must be a setup step before they become available that I'm not aware of.
I have this Knockout view model:
define([
'knockout',
'durandal/events',
'durandal/app',
'Common/Modules/KoComponents/slideInEventListKeys'
],
function (ko, durandalEvents, durandalApp, slideInEventListKeys) {
function SlideInVm(params) {
// listen for anyone broadcasting this specific event.
durandalEvents.includeIn(this);
var _this = this;
durandalApp.on(slideInEventListKeys.open).then(function () {
_this.isShowing(true);
});
durandalApp.on(slideInEventListKeys.close).then(function () {
_this.isShowing(false);
});
}
SlideInVm.prototype.isShowing = ko.observable(false);
});
and in Jasmine:
define([
'knockout',
'Common/Modules/slideInVm',
'durandal/events',
'durandal/app',
'Common/Modules/slideInEventListKeys'
],
function (ko, SlideInVm, durandalEvents, durandalApp, slideInEventListKeys) {
'use strict';
describe('Given the Slide In component', function () {
var vm;
beforeEach(function(){
vm = new SlideInVm();
});
it('Should subscribe for open events', function () {
debugger;
// events and app are null!
// how to check this?
});
it('Should subscribe for close events', function () {
});
describe('When opening', function(){
beforeEach(function(){
// how to trigger this if app is null?
app.trigger(slideInEventListKeys.open);
});
it('Should show the component', function(){
expect(vm.isShowing()).toBeTruthy();
});
});
});
});
Related
I'm trying to understand Vue and it's dependencies (newbie) just need help to understand the way axios works so it can be clear to me.
If I use code below it works to returning my data:
methods: {
load: function() {
axios.get('/api/projects')
.then(
response => {
this.projects = (response.data.projects);
}
)
.catch(function (error) {
this.errors.push(error);
console.log(error);
})
}
}
But if I use code below it doesn't return data:
methods: {
load: function() {
axios.get('/api/projects')
.then(function (response) {
this.projects = (response.data.projects);
})
.catch(function (error) {
this.errors.push(error);
console.log(error);
})
}
}
The difference is in .then part only.
this is referring to different object in both functions.
Write console.log(this) and you will see that the one in arrow function is referring to Vue instance. The other one, however, is referring to other object. probably window. In the case of function() {} you can't access Vue instance via this. You need to store it beforehand in a variable.
var vm = this;
axios.get('/api/projects')
.then(function (response) {
console.log(this); // undefined or other object
console.log(vm); // vue instance
vm.projects = (response.data.projects);
})
See another SO post for more details.
From MDN:
An arrow function does not have its own this; the this value of the enclosing execution context is used.
It's not the axios that needs to be explained. It's how this keyword behaves in different contexts. Your first method makes use of something called Arrow Function, which doesn't have this of it's own so it uses the this of the current context. But your second method does have it's own this.
So, in order for you second method to work, you would have to cache this outside of the closure, like this:
methods: {
load: function() {
var that = this;
axios.get('/api/projects')
.then(function (response) {
that.projects = (response.data.projects);
})
.catch(function (error) {
this.errors.push(error);
console.log(error);
})
}
}
And then it will work.
Route:
Here template and controller is not working. Below is code:
(function() {
'use strict';
angular.module('signup', ['ui.router']).config(appConfig);
appConfig.$inject = ['$stateProvider', '$locationProvider'];
function appConfig($stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
$stateProvider
.state('signup', {
url: '/',
templateUrl: 'app/signup/signup.html',
controller: 'SignUpController',
controllerAs: 'vm'
});
}
})();
Controller:
(function() {
'use strict';
angular
.module('signup')
.controller('SignUpController', SignUpController);
function SignUpController() {
var vm = this;
vm.title = "signup";
console.log("signup controller");
}
})();
HTML here
<h1>{{vm.title}}</h1>
console and title is not displaying. I don't know what is wrong here.
Thank you
The issue was probably the absence of tag, which is required by angular ui-router to insert any template associated to a state.
Adding the same solved the issue.
I have a web page that uses
app.controller('listCtrl', function ($scope, $http) {
$http.get("http://data.com/?region=north").success(function (data) {
$scope.properties = data;
});
});
On the click of a button, I'd like to reload the source from a different URL
$http.get("http://data.com/?region=south").success(function (data) {
$scope.properties = data;
});
Is there a way of doing this?
Encapsulate the getting of the resource in a function that is parameterized, so you can call it once when the controller is initializing, and any time they click the button after that.
app.controller('listCtrl', function ($scope, $http) {
function getResource(region) {
$http.get("http://data.com/?region=" + region).success(function (data) {
$scope.properties = data;
});
}
$scope.changeRegion = getResource; // provide function for button click
getResource('north'); // initialize default
});
View:
<button type="button" ng-click="changeRegion('south')">Change Region</button>
i'm using PhoneGap with JQuery mobile ajax to retrieve some records from a database here's my code !! but unfortunately its not working
can somebody tell me what's wrong
<script>
$(document).ready(function() {
$('#cont').bind('pageshow', function () {
$.get('http://tech-tude.com/freedomwobas/getepisodes.php', function (data) {
$(this).find('div[data-role="content"]').append(data);
});
});
});
</script></head><body ><div data-role="content"></div>
You need to (at least) wait for the device to be ready. Try this:
<script>
function onDeviceReady() {
$('#cont').bind('pageshow', function () {
$.get('http://tech-tude.com/freedomwobas/getepisodes.php', function (data) {
$(this).find('div[data-role="content"]').append(data);
});
});
}
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script></head><body ><div data-role="content"></div>
I have the following code snippet:
$(document).ready(function () {
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
// validate the #regFormBody form when it is submitted
$("#regFormBody").validate({
submitHandler: function(form) {
alert('form is submitted');
},
rules: {
...
},
messages: {
...
}
});
}
The problem is that after I add the
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
The form validation doesn't work at all. I always see the message alert('form is submitted') even without entering any information to form.
May you tell me how to solve this problem?
Thank you
You can expand your options object for .ajaxForm(), like this:
$('#regFormBody').ajaxForm({
beforeSubmit: function() {
return $('#regFormBody').valid();
},
success: function() {
alert('Thanks for your comment!');
}
});
This will kick off validation before submitting, and if it's not .valid() it'll stop the submit from happening like you want.