将聚合物输入值与非聚合物输入值结合

时间:2016-09-19 19:47:09

标签: javascript jquery html polymer

有没有办法根据Javascript / jQuery函数更新纸质输入元素?我可以通过点击链接获得旧的输入更新,但我似乎无法弄清楚如何将旧的输入值绑定到新的纸张输入值或只是用常规函数更新新的纸张输入值

<!-- polymer element loads in shadow DOM -->
<my-form>
  <paper-input id="id1" name='id1' value="{{val1}}" onmouseover="this.value=getId1Value();"></paper input>
  <a href="#" onclick='myJavascriptFunction(1)' id='relativeValue1'>Subtract 1</a>
  <a href="#" onclick='myJavascriptFunction(2)' id='relativeValue2'>Subtract 2</a>
</my-form>
<!-- end polymer element -->

<!--HTML input element in light DOM -->
<input type="text" id="id1" name="id1" value="{{val1}}" />
<!-- end HTML input element -->

然后是脚本和聚合物信息:

Polymer({
  is: 'my-form',
  properties: {
    val1: {
      type: String,
      value: getId1Value();
    }
  }
});
function getId1Value(){ return $$("#id1").val();}
function myJavascriptFunction(val){
  $$("[name='id1']").val(evaluate(val));//evaluate returns a calculation based on val)
}

1 个答案:

答案 0 :(得分:0)

这不是我想到的,但为了达到效果(同步/绑定多个输入),我用了

<a href="#" onclick="document.querySelector('my-form::shadow #id1').value = myJavascriptFunction(1)">1</a>

function myJavascriptFunction(val){
  $$("[name='id1']").val(evaluate(val));//evaluate returns a calculation based on val)
  return evaluate(val);
}

在这种情况下,myJavascriptFunction不仅手动设置旧输入值,还返回与链接onclick事件一起使用的值。所以我的解决方案是使用document.querySelector()定位shadow DOM并调整myJavascript函数以设置旧的输入值并返回相同的值。