QA@IT

(Titanium Mobile / iOS / javascript) Ti.UI.createSlider の change イベントの value をグローバル変数に格納したい

3028 PV

Ti.UI.createSlider の change イベントの value をグローバル変数に格納するにはどうすれば良いでしょうか?

初めまして。micky と申します。

早速ですが質問です。

change イベントによって取得された値を、関数内だけでなく、そのモジュール全体で使いたいとういうのが目的です。(グローバル変数でなくとも、 change イベントが設定されている関数外の変数にイベントの値を渡せるだけでも構いません)

var foo; //ここにスライダの値を格納したい

slider.addEventListener('change', function(e){
foo = e.value; 
});

lblTimer.text = foo;

上記のコードを実機で走らせたところ、foo は空のままでした。(画面には何も表示されない) foo に定数を代入したところ、画面には問題なく代入した定数が表示されました。

お忙しいとは存じますが、諸先輩方の知恵を借りたく存じます。
どんな些細なアドバイスでも宜しいので、頂けますと幸いです。

宜しくお願いいたします。

松井

回答

現状のコードでもfooの値は e.value の内容で更新されているとは思います。
「画面が何も変わらないから値が入っていないはずだ」と思っているのであれば、
ご提示のコードでは、changeイベントが発生しても、lblTimer.textの更新(テキストプロパティへの代入)を行っていないのでsliderを変化させても何も起きないと思います。

var foo; //ここにスライダの値を格納したい      // ① 

slider.addEventListener('change', function(e){ // ②
  foo = e.value;      // ③
});

lblTimer.text = foo;  // ④

このコードは
①→②(イベントリスナーの登録)→④ の順で実行されこの時点では③は実行されません。
画面上でsliderを変化させた時は ③だけが実行されます(changeイベントのリスナーとして登録したfunctionの部分しか実行されません)。


定数を代入したら表示されたというケースでは例えば以下の様なコードにしたと思いますが

var foo="sample"; //ここにスライダの値を格納したい      // ① 

これは実行順序は変わらず ①→②→④ の順であるものの、④の段階でfooに値が入っているから
画面には表示されたという形になります。


ということで、lblTimerに値を見せたいのであれば ③の後で
fooの値を画面に表示するコードを書かなければなりません。
(③のfunctionの中で)

ただもう1点気がかりなのでshが、e.valueでsliderのvalueが取れるのかが気になります。
titanium mobileの環境がないのでわかりませんが、場合によっては
以下の様な形の方がよいかもしれませんのでそのあたりは別途調べてみてください。

foo=slider.value;
編集 履歴 (0)
  • お忙しいなか、的確かつ丁寧な回答を頂きまして誠に有難うございます。(下記に詳細な再現方法を記しましたので、また宜しければご笑覧ください) -

flied_onion 様

お世話になります micky です。
早速にお返事いただきまして誠に有難うございます。

貴殿の仰る通り、テキストプロパティへの代入が行われていないのが原因だったようです。
現状のコードでも foo には e.value の値がしっかりと代入されておりました。

slider.addEventListener('change', function(e){
  foo = e.value;
});

slider.addEventListener('click', function(){
 lblTimer.text = foo;
});

以上のようにクリックイベントハンドラを設定したところ、無事 foo の値を確認(表示)することが出来ました。

ただもう1点気がかりなのでshが、e.valueでsliderのvalueが取れるのかが気になります。>titanium mobileの環境がないのでわかりませんが、場合によっては以下の様な形の方がよいかもしれませんのでそのあたりは別途調べてみてください。

こちらは e.value でも slider.value でもどちらでも、 event 発火時の値を取得することが出来ました。

お忙しいなか、丁寧かつ的確なアドバイスをして頂けたことに重ねてお礼を申し上げます。


私の意図することと少しずれますが、Titanium の開発元である appcelerator の Q&A フォーラムでも質問したところ、有益なアドバイスを頂きましたので、私と同じ問題を抱える方に向けて共有させて頂きます。
内容は e.value をグローバル変数として扱う方法についてです。

詳細は私の質問したスレッドを参照下さい http://developer.appcelerator.com/question/175786/how-to-set-the-event-value-of-slider-to-global-variable-#comment-214162

Ti.App.Properties モジュールを用いる方法

slider.addEventListener('change', function (e) {
    Ti.App.Properties.setString('slidervalue', e.value);
});

lblTimer.text = Ti.App.Properties.getString('slidervalue');

CommonJS を用いる方法

/* helper.js */
var slider = 0;
var firstname = '';
function setSlider(val) {
    slider = val;
}
function getSlider() {
    return slider;
}
function setFirstName(val) {
    firstname = val;
}
function getFirstName() {
    return slider;
}
exports.getSlider = getSlider;
exports.setSlider = setSlider;
exports.getFirstName = getFirstName;
exports.setFirstName = setFirstName;
/* Usage Examples */
// setting
slider.addEventListener('change', function(e){
    require('helper').setSlider(e.value);
    lblTimer.text = e.value;
});

// later on - retrieving
alert(require('helper').getSlider());
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。