java - 转换列表使用 JSNI 进入 Javascript

Question

需要做一个 JSNI 方法，该方法将提供 TextBox 上的项目列表，使用 Twitter Bootstrap X-Editable将其设置为“可编辑”为 ListBox ：

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
            });
        }
    );          
}-*/;

问题是：

• 需要将 List 转换为 Javascript 列表
• 来源似乎没有从$wnd.items

很好，当我运行应用程序时，GWT TextBox 变为X-Editable但它不显示项目列表。

Answer 1

要将您的列表转换为 javascript 列表，您可以使用以下代码：

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);
}-*/;

然后你可以将它传递给

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

并像 javascript 列表一样使用它。有点矫枉过正，但它的工作原理。

Answer 2

更短的转换代码：

private static JsArrayString createJsArrayString(List<String> list) {
    JsArrayString jsArray = (JsArrayString) JsArrayString.createArray();
    for (String string : list) {
        jsArray.push(string);
    }
    return jsArray;
}