Convert a List<String> into Javascript with JSNI

Question

Need to do a JSNI method that will provide a List of items on a TextBox that is made "editable" as ListBox using Twitter Bootstrap X-Editable:

public static native void makeEditableList(Element el /*, List<String> items*/)/*-{
    $wnd.items=[];
    $wnd.$.each({"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria"}, 
        function(k, v) {
        $wnd.items.push({id: k, text: v});
    }); 
    $wnd.$(function(){      
            $wnd.$.fn.editable.defaults.mode = 'inline';
            $wnd.$(el).editable({
                inputclass: 'input-large',
                source: $wnd.items
            });
        }
    );          
}-*/;

Problems are:

• Need to convert List into Javascript list
• The source doesn't seem to get the items from $wnd.items

Good this that when I run the application, the GWT TextBox becomes X-Editable but it does not show the list of items.

Answer 1

For converting your List to javascript list you can use this piece of code:

private JavaScriptObject convertListToJsList(List<String> list){
    JavaScriptObject jsListObject = createJsListObject();
    for (String stringToAdd : list){
        addStringElement(jsListObject, stringToAdd);
    }
    return jsListObject; 
}


private native JavaScriptObject createJsListObject()/*-{
    return [];
}-*/;

private native void addStringElement(JavaScriptObject jsListObject, String stringToAdd)/*-{
    jsListObject.push(stringToAdd);
}-*/;

then you can pass it to

public static native void makeEditableList(Element el /*, List<String> items*/, JavaScriptObject list)

and use it like javascript list. A little bit overkill, but it works.