JS - 自定义文本图标 - ES6回调单击

时间:2018-03-17 06:20:10

标签: javascript

public class ApiClient {

    private static Retrofit retrofit = null;
    private static final String SERVER_BASE_URL = "https://wordsapiv1.p.mashape.com";

    public static Retrofit getClient() {
        if (retrofit == null) {
            retrofit = new Retrofit.Builder()
                    .baseUrl(SERVER_BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();
        }
        return retrofit;
    }
}

onclick =“$ {()=> {_ on_click()}}”没有错误,但回调无效。

1 个答案:

答案 0 :(得分:2)

内联js是eval',所以:

onclick="${() => { _on_click() }}"

不起作用,因为它只等于

()=>{ _on_click() }

这只是一个功能。你想要的是一个函数调用,所以:

onclick="(${() => { _on_click() }})()"

最终将成为

(()=>{ _on_click() })()

被评估为立即执行的功能。当然所有这些都可能是:

onclick="_on_click()"

虽然即使使用立即执行的函数,但在调用_on_click时仍然无效,因为函数仍需要在全局范围内才能执行。

您只需插入html并在元素上添加事件侦听器:

var textIcon = $(`<text-icon>
                      <icon class="${_icon}"></icon>
                      <text>${_text}</text>
                  </text-icon>`);
//Add it to the dom
_holder.append(textIcon);

//Add click event listener
textIcon.on('click',_on_click);
//And if for some reason you need an arrow function
textIcon.on('click',()=>{
   _on_click();
});

演示

function textIcon(_holder, _icon, _text, _on_click) {
  var textIcon = $(`<text-icon>
                        <icon class="${_icon}"></icon>
                        <text>${_text}</text>
                    </text-icon>`);
  _holder.append(textIcon);
  textIcon.on('click', () => {
    _on_click();
  });
}

textIcon($('#container'),'someicon','some text',()=>console.log('in callback'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>