聚合物dart输入绑定int属性 [英] polymer dart input binding int properties

查看:140
本文介绍了聚合物dart输入绑定int属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

将输入字段绑定到对象的int属性的正确方法(例如,输入框更改和更新对象的int属性,导致另一个绑定到同一属性的元素进行更新)

What is the proper way of binding an input field to an int property on an object (e.g. input box changes and updates int property of an object causing another element who is binding to the same property to update)

示例代码如下;我可能认为这条路线的路线错误,但需要澄清。

Example code is below; I may be thinking the wrong way going this route but need some clarification.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="components/calc.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
</head>
<body>
  <my-calc></my-calc>
</body>
</html>







<!-- calc.html -->
<polymer-element name="my-calc">
  <template>
    <label>Price</label>
    <input value='{{ price }}'>

    <label>Qty</label>
    <input value='{{ qty }}'>

    <label>Total</label>
    <input value='{{ price * qty }}'>

  </template>
  <script type="application/dart" src="calc.dart"></script>
</polymer-element>

// calc.dart 
import 'package:polymer/polymer.dart';

@CustomTag('my-calc')
class CalcElement extends PolymerElement {
  @observable int price = 0;
  @observable int qty = 0;

  CalcElement.created() : super.created();
}


推荐答案

跟踪这里。唯一的问题是输入元素的 value 属性是一个字符串。一种方法是这样:

You're on the right track here. The only problem is that the value attribute of the input element is a string. One way to do it is like this:

<!-- calc.html -->
<polymer-element name="my-calc">
  <template>
    <label>Price</label>
    <input value='{{ price }}'>

    <label>Qty</label>
    <input value='{{ qty }}'>

    <label>Total</label>
    <input value='{{ int.parse(price) * int.parse(qty) }}'>

  </template>
  <script type="application/dart" src="calc.dart"></script>
</polymer-element>







//calc.dart
import 'package:polymer/polymer.dart';

@CustomTag('my-calc')
class CalcElement extends PolymerElement {
  @observable String price = "0";
  @observable String qty = "0";

  CalcElement.created() : super.created();
}

这篇关于聚合物dart输入绑定int属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆