2016-09-19 13 views
0

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) 
} 
+0

バインディングを使用しようとするとしますか?たぶん、いくつかのプロパティを ''に追加してから、 ' 'の値に直接バインドしてバインドすることができます – Dmitry

答えて

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イベントとともに使用する値を返しました。私の解決策は、影のDOMをdocument.querySelector()でターゲットにし、myJavascript関数を調整して古い入力値を設定し、同じ値を返すようにしました。

関連する問題