How to use a variable in JavaScript command? - eval

Consider a simple JS function as
function test(property, color) {
var element = document.getElementById("test");
element.style.PROPERTY = color; // I want to use a variable for this command
}
In a typical JS command of element.style.PROPERTY, I want to introduce the property as a variable. This is a very basic example; what is the best approach to use variables in JS command lines?

Use it as:
element.style[property]
This is a very basic example; what is the best approach to use variables in JS command lines?
It depends on what you want to achieve. In this case - just use [...]

element.style[property] = color; should work.

Related

How to access Angular JS inside string format

Is there any way that I can get angular variable value as below syntax.?
var iNumber= "$scope.RegionLineNumber"
why you want to do this. If you want to get in string format then you can use
$scope.RegionLineNumber.toString();
You can use eval (read this and this before)
var iNumber = eval("$scope.RegionLineNumber");
however there's certainly a better way to do that. For example, if you know it's in $scope, just use
var iNumber = $scope["RegionLineNumber"];

What is the best place to put text constant in angular?

I have an angular project, and want to set a text constant
article_sample = "<h1> This is a sample article </h1>\
This is the content
This is the content
This is the content
...
This is the content"
This article_sample is very long(may more than one page). And in my js file, I should use assign article_sample if I get null article from backend:
if (article == null) {
article = article_sample;
}
I don't want to put the constant or variable article_sample in the same js file, because it will take a large proportion of the file and make it unreadable.
So where is the best place to put this constant(or variable)?
You can put this constant inside your app.js or in any other files using the following code
angular.module('myApp', []).constant('ARTICLE_SAMPLE', '<h1>This is a sample .....');
From the documentation :
constant(name, object);
Because the constants are fixed, they get
applied before other provide methods. See $provide.constant().

Reactive non-mongo variable in angular-meteor

I couldn't find an answer or a solution to a challenge yet: How can I bind a variable (Session variable, no mongo collection) reactively in angular-meteor?
I'm converting from standalone meteor. Here I could use the template.helper method. As I can't use templates (and iron:router) anymore with angular-meteor and angularui-router, I can't bind reactivity to the helper anymore (at least in my understanding).
I tried this in an meteor-angular controller, which belongs to a sentence.tpl file:
$scope.parsestring = function(input_string){
tokenizer(input_string);
};
$scope.sentence_type = Session.getJSON("current_sentence.sentence_type");
Tokenizing works (I can see it in the debugger), but the value is only displayed, when I reload the page. What I want to achieve is tokenizing a string from an input field into a JSON representation (the tokenizer takes care of that) and displaying it similtaniously from the JSON representation in a structured way (separate html input elements, which are created dynamically). sentence_type is the variable that should be used on the html-page to show and change the sentence type, which can change while typing.
Anybody has some hints? Maybe, I could also use some Angular feature that I don't know?
Cheers,
Jan
Code repo:
My current code looks like this:
My code looks similar to this:
angular.module('ngaignt').controller("InteractorCtrl", ['$scope', '$meteor', '$meteorCollection',
function ($scope, $meteor, $meteorCollection) {
// Autorun is necessary to make reactive variables out of the JSON returns
var c = Tracker.autorun(function (comp) {
$scope.verb_type = Session.getJSON("current_verb.type");
$scope.object_type = Session.getJSON("current_object.type");
$scope.verb_attributes = _.toArray(Session.getJSON("current_verb.attributes"));
$scope.object_attributes = _.toArray(Session.getJSON("current_object.attributes"));
if (!comp.firstRun) {
// only do not do aply at first run becaulse then apply is already running.
$scope.$apply();
}
});
$scope.parsestring = function (input_string) {
interactor(input_string);
};
//$scope.on('$destroy', function () {c.stop()});
}]);
To use reactive variables, you need a reactive computation. You may need to use Tracker.autorun:
$scope.parsestring = Tracker.autorun(function(someStringInSession){
tokenizer(Session.get(someStringInSession));
});
Or you can use Tracker.autorun(func) wherever you use a reactive variable to reactively rerun a function when the variable changes.
good question and the best answer depend on your needs.
There are 2 possible solutions:
If you want to bind a Session variable to a scope variable, use the $meteorSession service.
What it does is that every time the scope variable will change, it will change to Session variable (and trigger an autorun if it's placed inside one).
and every time the Session variable will change, the scope variable will change as well (and change the view that it's placed upon).
If you are using the Session variable just to get a variable reactive (meaning trigger an autorun), you should use getReactively . this just returns the already existing scope variable but trigger an autorun every time it changes. a good example of this can be found it our tutorial.
Note: In anyway, when you use Tracker.autorun inside Angular, you need to connect it to a scope. this can be easily done if you replace Tracker.autorun with the $meteorUtils autorun function
Would be great if you could share a repo so that I can look on the broader perspective and could better determine what's the best solution from the two.
Based on another answer about "session" reacitivity, I could solve the problem. Just use the approach described in the link https://stackoverflow.com/a/21046935/4035797. You have to substitute Deps.autorun by Tracker.autorun though as Deps is deprecated and you have to make the scope variables for use in the template reactive (e.g., $scope.sentence_type = Session.getJSON("current_sentence.sentence_type");) and not the tokenizer.

Difference between $scope.myFunction() and myFunction($scope)

I'm currently developping an angular app and I have found two ways to call a function that does a simple multiplication.
First
function calcul(contexte) {
contexte.proposition.marge_theorique = contexte.proposition.marge_grille * 2;
}
and call it with
calcul($scope)
Second
$scope.dynamicChange = function () {
$scope.proposition.marge_theorique = $scope.proposition.marge_grille * 2;
}
and call it with
$scope.dynamicChange()
What is the difference between those usages?
Thanks a lot
There is no execution difference between your two approaches, but I would recommend you the second one, cause passing scope in parameter is not very usual, adds nothing, and it not allows you to use method directly in your view.
Using the second way, (I mean, the $scope.dynamicChange one), is also good cause you take profit of the Angular controllers inheritance. So every child scope of your controller scope will get this method.
Conclusion, no very difference for your specific task, but I recommend you to use the more "Angular" way.
In the example above, calling the function with dynamicChange() would throw an error, since dynamicChange() is a method of $scope and not a function.
You would need to call $scope.dynamicChange
You won't be able to call the function of the first example from within your html-templates.
So you can't just use something like.
<div>
{{myFunction()}}
</div>

What are differences between Ext.create() and Ext.define() in SenCha Touch

I have been learning SenCha Touch for awhile and still feel confused when trying to create a store.
In the SenCha Documentation, it says to use Ext.create() Example
I tried and it simply doesn't work.
For the rest of others, I always see people use Ext.define() to create a store and it works.
Now, my question is:
what are the differences between them and when/how to use either one of them in a right way?
Some demo code is highly appreciated
Thanks a lot my friends.
define is for declaring a class.
Ext.define('Foo', {
extend: 'Bar'
});
// Similar to:
public class Foo : Bar {
}
create is for creating an instance:
var o = Ext.create('Foo'); // Can also have var o = new Foo();
// Similar to:
Foo o = new Foo();
Ext.create
- to create an instance of a pre-defined class.
- the class was defined using Ext.define
- used to define the data and behavior of a component. which will be used later.
Ext.define
- to define your own class definition
- reusable component.
- instances can be created using Ext.create API.

Resources