With a normal view model I can call a function after initialization outside of it's context like so:
var ViewModel = function () {
this.Foo = function () {
alert("bar");
};
};
var vm = new ViewModel();
ko.applyBindings(vm);
vm.Foo();
http://jsfiddle.net/h01ky3pv/
How do I do something like this with a component's view model? I want to call FooComponentViewModel's Foo function when the foo component is first loaded.
ko.components.register("foo", {
viewModel: FooComponentViewModel,
template: {
element: "component-foo"
}
});
function FooComponentViewModel(params) {
this.Foo = function () {
alert("bar");
};
}
var ViewModel = function () {
// empty
};
var vm = ViewModel();
ko.applyBindings();
http://jsfiddle.net/r3d41q6c/2/
Just an idea, pass a callback as a parameter for the component:
HTML:
<foo params="callback: callback"></foo>
JS:
function FooComponentViewModel(params) {
this.Foo = function () {
alert("bar");
};
params.callback(this);
}
function ViewModel() {
this.callback = function(vm) {
vm.Foo();
};
}
http://jsfiddle.net/r3d41q6c/3/
Related
I have a factory like this:
TestFactory= function () {
var objectName=null;
return {
SetName:function(name) {
objectName = name;
},
GetName:function() {
return objectName;
},
Init:function() {
return angular.copy(this);
}
}
}
A controller like:
TestController = function($scope) {
$scope.TestClick = function () {
var tstA = TestFactory.Init();
var tstB = TestFactory.Init();
tstA.SetName('test A')
tstB.SetName('test B')
console.log('A', tstA.GetName());
console.log('B', tstB.GetName());
}
}
In the console I get Test B for both objects.
How can I make a proper instance of this object?
I would like to use the objectName value in other functions of the factory.
Take into account that in Angular, Factories are singletons, so the instance is always the same.
You can do the following:
TestFactory= function () {
var objectName={};
return {
SetName:function(property,name) {
objectName[property] = name;
},
GetName:function(property) {
return objectName[property];
},
Clear:function(property) {
delete objectName[property]
}
}
}
Then in your controller:
TestController = function($scope, TestFactory) {
$scope.TestClick = function () {
TestFactory.SetName('a','test A')
TestFactory.SetName('b','test B')
console.log('A', TestFactory.GetName('a')); // test A
console.log('B', TestFactory.GetName('b')); // test B
}
}
Couple of issues. First your returning an object rather than a function from your factory.
app.factory('TestFactory', function() {
return function() {
var objectName = null;
var setName = function(name) {
objectName = name;
};
var getName = function() {
return objectName;
};
return {
SetName: setName,
GetName: getName
};
};
});
Then you can just instantiate like this:
var tstA = new TestFactory();
var tstB = new TestFactory();
Services and factories are singletons so I think you can achieve what you want with a more appropriate use of the factory by providing an Init function that returns the common code and unique name like so:
angular.module('app')
.factory('ServiceFactory', serviceFactory);
function serviceFactory() {
return {
Init: function (name) {
return {
objectName: name,
setName: function (name) {
this.objectName = name;
},
getName: function () {
return this.objectName;
}
};
}
};
}
This leaves the possibility to use it as a factory that can initialize many types.
You basically need to create a simple getter/setter.
angular.module('app', [])
.controller('TestController', testController)
.service('serviceFactory', serviceFactory);
testController.$inject = ['serviceFactory'];
function testController(serviceFactory) {
serviceFactory.set('A', {
name: 'test A'
});
serviceFactory.set('B', {
name: 'test B'
});
console.log(serviceFactory.getAll());
console.log(serviceFactory.get('A'));
console.log(serviceFactory.get('B'));
}
function serviceFactory() {
var
_model = {
name: ""
},
_data = {};
return {
set: function(key, data) {
_data[key] = angular.extend({}, _model, data);
},
get: function(key) {
return _data[key];
},
getAll: function() {
return _data;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="app" ng-controller="testController"></body>
I define a script with no dependencies with require:
define([], function () {
var obj = {
doSomething: function() {}
}
return : {
obj : obj
}
});
However when I have to use doSomething like this:
require(['obj'], function (obj) {
obj.obj.doSomething();
});
What am I doing wrong, so I can't just use
obj.doSomething();
Try:
define([], function () {
var obj = {
doSomething: function() {}
}
return obj;
});
How do I call a parent namespace function from within a function?
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
setTimeout ( function () {
myNamespace.funcOne(); //how do I call funcOne?
}, 2000);
}
}
The usual way would be to use the this keyword inside the literal
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
var self = this;
setTimeout ( function () {
self.funcOne();
}, 2000);
}
}
But what you're doing should work just fine as well -> FIDDLE
I have an object representing a person:
function Person(_name) {
this.name = _name;
this.start = function() {
var that = this
$timeout( function sayHello() {
console.log(that.name);
$timeout(sayHello, 1000);
}, 1000);
}
}
Notice that is uses the angular $timeout service. Where should I put this so that I can declare people in my controller:
function Ctrl($scope) {
// How do I access Person so I can do this?
$scope.p1 = Person('nick');
$scope.p2 = Person('amy');
$scope.p1.start();
$scope.p2.start();
}
I can put the declaration in the controller body, and it works but that doesn't seen like good design. I'm pretty sure a value, or provider is specifically for this. But not sure how it would work given the dependency on $timeout.
You can create objects in a factory
var Person = (function (params) {
angular.extend(this, params);
return {
name: params.name,
};
});
Person.create = function create(params) {
return new Person(params);
};
myApp.factory('Person', function ($timeout) {
return Person;
});
Then in your controller you can inject the factory and create Person objects.
myApp.controller('HomeCtrl', function($scope, Person) {
$scope.person = Person.create({ name: 'Andy' });
});
I would make it a Service that returns a constructor.
var myModule = angular.module('myModule', []);
myModule.service('Person', function($timeout) {
// Actual person constructor defined once when
// the service is first instantiated
function Person(name) {
this.name = name;
this.start = function() {
var that = this
$timeout( function sayHello() {
console.log(that.name);
$timeout(sayHello, 1000);
}, 1000);
}
}
this.create = function (name) {
// Return a new instance
return new Person(name);
};
});
Note that you would use Person.create() to make instances in this case.
I have GObject subclass defined.
BrowserToolbar = new GType({
parent: Gtk.HBox.type,
name: "BrowserToolbar",
init: function (){
}
});
I have defined new function abc using the same syntax as for init.
BrowserToolbar = new GType({
parent: Gtk.HBox.type,
name: "BrowserToolbar",
init: function (){
}
abc: function (){
}
});
But I am not able to call it, it is "undefined". What is wrong?
var tb = new BrowserToolbar();
tb.abc(); // undefined -> error
Thanks
Found it: http://git.gnome.org/browse/seed-examples/tree/browser/TabbedBrowser.js
init: function ()
{
this.close_tab = function (tab) {}
}