2

私はプロトタイプが初めてで、ここで提供されている最小限のドキュメントを本当に理解できませんhttp://harvesthq.github.com/chosen/

selected.js を動的に更新するには、このスニペットを使用する必要があると書かれています

Event.fire($("form_field"), "liszt:updated");

私が理解していないのは、どの要素を対象にする必要があるかということEvent.fireです。私の場合、2 つの選択要素を持つ動的フォームがあります。ユーザーが最初の選択要素でオプションを選択した後にのみ、2 番目の選択要素が有効になります。この図のように:

ユーザーがサイズを選択した後にのみ有効な色

だから私は自分のコードでそれを試してみました。ここにあります：

// let say I want to make all .chzn-select element replaced by chosen.js
var el = $$(".chzn-select");

// this is the code to make all .chzn-select replaced by chosen.js
document.observe('dom:loaded', function(evt) {
     var select, selects, _i, _len, _results;
     if (Prototype.Browser.IE && (Prototype.BrowserFeatures['Version'] === 6 || Prototype.BrowserFeatures['Version'] === 7)) { return; }
     selects = el;  _results = [];
     for (_i = 0, _len = selects.length; _i < _len; _i++) {
        select = selects[_i];
        _results.push(new Chosen(select));
     }
}); 

// this is what I used to observe the change event of the .chzn-select element
el.invoke('observe', 'change', function() {
    // I have successfully updated all the .chzn-select element after the change of some other .chnz-select
    myOwnObjet.myOwnFunction(el);

    // now this is where I get confused, I want to update all the generated chosen.js selector
    Event.fire(el, "liszt:updated");
});

その例では、その Event.fire はまったく機能していないようです...では、ここで何が間違っているのでしょうか? ユーザーがサイズ選択を選択した後、色選択のchoose.jsバージョンを更新する方法を正確にどのように更新できますか?

4

1 に答える 1

1

observeすべての要素に対するイベントの呼び出しで、現在の要素として.chzn-select使用すると、配列内の実際の要素は反映されません。el

これを試して：

el.invoke('observe', 'change', function(ev) {
    var nev = Event.element(ev);
    myOwnObject.myOwnFunction(nev);

    Event.fire(nev, 'liszt:updated');
});

アップデート

OK、徹底的に調査したところ、問題が見つかりました。含まれていませんでした。コードを完全に修正しました。このフィドルevent.simulateをチェックしてください。

フィドルで使用されるコードは次のとおりです。

var selects;
document.observe('dom:loaded', function(evt) {
    selects = $$('select.chzn-select').inject($H(), function(hsh, sl) {
        hsh.set(sl.id, new Chosen(sl));
        return hsh;
    });

    selects.each(function(pair) {
        Event.observe($(pair.key), 'change', function(ev) {
            myOwnFunction($(pair.key), pair.value);
        });
    });
});

function myOwnFunction(select, chzn) {
    if (select.id === 'sl-color') {
        var size = $('sl-size');
        size.disabled = false;

        Event.fire(size, 'liszt:updated');             
    }
}
​
于 2012-06-25T08:29:44.677 に答える