I'm build an application with appcelerator-studio.
The application create programmatically a table with this code:
controller.js
var rowData = [];
var header = Alloy.createController('result_row_header',{
examination:Titanium.Locale.getString(lang+"examination"),
start_date:Titanium.Locale.getString(lang+"start_date"),
end_date:Titanium.Locale.getString(lang+"end_date")
});
var viewHeader = header.getView();
//DISEGNO LA TESTATA
rowData.push(viewHeader);
$.table.setData(rowData);
function set_fields(lang) {
header.changeLanguage(lang);
}
result_row_header.js
var args = arguments[0] || {};
$.examination.text = args.examination;
$.start_date.text = args.start_date;
$.end_date.text = args.end_date;
function changeLanguage(lang){
$.examination.text=Titanium.Locale.getString(lang+"examination");
}
Now I want to call the changeLanguage method from controller.js but if I try to execute the method set_fileds (from controller.js) I have an error.
Just a little change in your code:
result_row_header.js
var args = arguments[0] || {};
$.examination.text = args.examination;
$.start_date.text = args.start_date;
$.end_date.text = args.end_date;
// this is the code to access function of a controller from any other
$.changeLanguage = function (lang){
$.examination.text=Titanium.Locale.getString(lang+"examination");
};
Rest of your code remains same.
Lets says that this is your view.js file:
$.yourMethod = function() {
return 'first';
};
$.view.yourMethod = function() {
return 'second';
};
And this is your view.xml:
<Alloy>
<View id="view">
<Label text="test view"/>
</View>
</Alloy>
You call it like this:
var view = Alloy.createController("view",{});
view.yourMethod(); //will return first
win.add(view.getView());
But if you get the view at the creation method, you call it like this:
var view = Alloy.createController("view",{}).getView();
view.yourMethod(); //will return second
win.add(view);
Titanium Alloy Controller Constructor doesn't exposer functions
Related
I've looked through a few questions related to this error, and most of them seem to be a misunderstanding of what the keyword this means. I don't think I'm having that problem here. Mine might be some sort of circular dependency problem that I cannot articulate well enough to figure it out on my own.
I've tried to distill my problem into three files presented below.
something.js
var A = require('../lib/a');
var Something = function (type) {
this.type = type;
};
Something.prototype.setTemplate = function (template) {
this.template = template;
};
Something.prototype.applyTemplate = function () {
var templateResult = this.template.calculate();
};
var factory = {};
factory.createSomething = function(type) {
return new Something(type);
};
factory.createA = function (input) {
return A.Make(input);
};
module.exports = factory;
a.js
var S = require('../prof/something');
var _ = require('underscore');
var A = function (input) {
this.input = input;
};
A.prototype.calculate = function () {
var calculation = 0;
var _s = S.createSomething('hello world');
// do calculation using input
return calculation;
};
var factory = {};
factory.Make = function (input) {
var a = new A(input);
return a;
};
module.exports = factory;
a_test.js
describe('Unit: A Test', function() {
var S = require('../prof/something');
it('test 1', function() {
var a = S.createA({
//input
});
var s = S.createSomething('type1');
s.setTemplate(a);
s.applyTemplate(); // error
});
});
The error gets thrown from the top level in a_test.js on the line with the comment //error. At the lowest level, the 'is not a function ' error is thrown in a.js at the S.createSomething(type) method. It says that S.createSomething() is not a function.
I've put a breakpoint in at that line and tried to call functions from the underscore library, but it gives the same error. So it seems that the require statements inside a.js are not throwing errors, but none of the injected objects can be used to call functions from. The a_test.js file is being run with the karma library.
Am I violating some javascript paradigm by referencing back and forth between A and S? How can I do this properly?
Edit: I've done some further testing. It doesn't actually matter if the test file looks like this:
describe('Unit: A Test', function() {
var S = require('../prof/something');
it('test 1', function() {
var a = S.createA({
//input
});
a.calculate(); // error
});
});
An error is still thrown at the line indicated above.
The files in the question reference each other. This is called cyclic dependencies. The solution is to move the var S = require('../prof/something'); statement into the calculate function like so:
a.js
// move the line from here
var _ = require('underscore');
var A = function (input) {
this.input = input;
};
A.prototype.calculate = function () {
var S = require('../prof/something'); // to here
var calculation = 0;
var _s = S.createSomething('hello world');
// do calculation using input
return calculation;
};
var factory = {};
factory.Make = function (input) {
var a = new A(input);
return a;
};
module.exports = factory;
When I load my json data from the server I need to have additional view only properties on json data. But thats not possible.
Then I thought about creating angularjs models from factories like:
'use strict';
angular.module('TGB').factory('TestViewModel', function () {
function TestViewModel(test) {
this.id = test.id;
this.schoolclassCode = test.schoolclassCode;
this.testType = test.type;
this.creationDate = test.date;
this.number = test.number;
this.isExpanded = false;
}
return (TestViewModel);
});
Where do you create these viewmodels in angular?
At the moment I have this method in my Controller , call it there and assign the result to $scope.testViewModels = toTestListViewModel(tests)
function toTestListViewModel(tests)
{
var testListViewModel = [];
for (var i = 0; i < tests.length; i++) {
var testViewModel = new TestViewModel(tests[i]);
testListViewModel.push(testViewModel);
}
return testListViewModel;
}
Controller is a proper place to create your 'view model' that can be accessed using $scope.
.controller('sampleCtrl', function ($scope, testViewModel) {
$scope.vM = testViewModel;
}
I have problem with below code. I have prices factory which returns object containing prices received from server by websocket. Prices are sent after button Create is clicked. Problem is that main.prices variable is not updated at all. I can check everything by Check button, which confirms this. Prices.data is updated, but this.prices is not, but it refers the same object, so I thought it should be updated as well. Do you have any ideas why below does not work as expected?
angular.module('myApp', ['ngWebSocket'])
.factory('ws', ['$websocket', function($websocket){
var url = 'ws://localhost/websocket';
var ws = $websocket(url);
return ws;
}])
.factory('prices', ['ws', function(ws){
var prices = {
data: [],
clear: function(){
this.data = [];
},
create: function(){
ws.send('send')
}
}
ws.onMessage(function(message){
message = JSON.parse(message.data);
var type = message.type;
if (type == 'new prices'){
prices.data = message.data;
}
});
return prices;
}])
.controller('main', ['prices', function(prices){
this.prices = prices.data;
this.check = function(){
console.log('works ', prices.data);
console.log('not works ', this.prices);
};
this.create = function(){
prices.create();
};
this.stop = function(){
prices.clear();
};
}]);
<div ng-controller="main as main">
{{ main.prices }}
<button ng-click="main.create()">Create</button>
<button ng-click="main.stop()">Stop</button>
<button ng-click="main.check()">Check</button>
</div>
There are a lot of issues with the code you posted (working on a fiddle so i can help rework it) ...
First change :
if (type == 'new prices'){
prices.data = message.data;
}
To:
if (type == 'new prices'){
prices.data.length = 0;
prices.data.push.apply(prices.data,message.data) ;//copy all items to the array.
}
From a readability / maintainability point of view you should just use this.prices vs this.prices.data. It's confusing to map them to other variables, when you can just use prices. Also note that I updated it to use "that" constantly to avoid any type of context this issues.
.controller('main', ['prices', function(prices){
var that = this;
that.prices = prices;
that.check = check;
that.create = create;
that.stop = stop;
function check(){
console.log('works ', that.prices.data);
console.log('not works ', that.prices);
}
function create(){
that.prices.create();
}
function stop(){
that.prices.clear();
}
}]);
To add to the previous response, you also have an issue on the clear():
var prices = {
...
clear: function(){
this.data = [];
},
...
}
when you do the clear with this.data = [] you are actually creating a new empty array an storing that in the this.data prop, and since this is a NEW array, the reference on main controller -> this.prices = prices.data; is still pointing to the old one. If you need to delete elements on the array just use this.data.length = 0 as Nix pointed out for the other method. that will keep all references in sync since you are re using the original array
I have three js controller file and 1 lib
app/lib/Client
function Client(id,name,blc){
this.id=id;
this.name=name;
this.blc=blc;
};
Client.prototype.getName = function(){
return this.id+' '+this.name+' '+this.blc;
};
Client.prototype.withdraw = function(amount){
if(amount<0) return -1;
if(this.blc<amount) return -1;
return this.blc-=amount;
};
Client.prototype.deposite = function(amount){
if(amount<0) return -1;
return this.blc+=amount;
};
module.exports = Client;
app/controller/addClient //this is where I want to add to global array
var args = arguments[0] || {};
var Client = require('Client');
function doClick(e) {
var user_id = $.id.getValue();
var user_name = $.name.getValue();
var user_blc = $.Balance.getValue();
if(user_id.length<=0 && user_name.length<=0 && user_blc.length<=0){
alert('you entred an invalid information');
}
else{
var c = new Client(user_id,user_name,user_blc);
alert(c.getName()+' is add successfly');
//note!!!!!
//add a global array to save the data
$.id.setValue("");
$.name.setValue("");
$.Balance.setValue("");
}
}
$.addClient.open();
app/controller/allClient
//this is where i want to use the data in Global app to make a listView
If you really want a "global array" use Alloy.Globals
If you want a collection of models, use Backbone
how do get a controller of a view
var c = Alloy.createController('win', activeTab);
c = c.getView();
Wins.push(c);
in controller win i have function
exports.fun = function() {
};
after getting the win from controller which is the view how do i call this function from a view i need controller to call the function
for ( i = 0; i < Wins.length; i++) {
Wins[i].fun();
}
Wins[i] is a View how do i get a controller of this view so that i can call the function fun()
dont push the window, push the controller
// this is a bad name for a controller...
var controller = Alloy.createController('win', activeTab);
var view = controller.getView();
// save the controller to a list of global controllers
Alloy.Globals.Controllers = Alloy.Globals.Controllers || {};
Alloy.Globals.Controllers['aController'] = controller;
// loop through all controller and execute func if it exists
for ( var i in Alloy.Globals.Controllers) {
Alloy.Globals.Controllers[i].fun && Alloy.Globals.Controllers[i].fun();
}