Question

我需要将属性绑定到编辑控件并让控件将其值写回同一属性。问题是，我在创建控件之前设置了源值：

<mx:Panel> <mx:Script> <![CDATA[ [Bindable] public var editedDocument: XML; ]]> </mx:Script> <mx:TextInput id="docLabel" text="{editedDocument.@label}"/> <mx:Binding source="docLabel.text" destination="editedDocument.@label"/> </mx:Panel>

我这样称呼：

var xmlDoc: XML = <document label="some label" />; var myPanel: MyPanel = new MyPanel(); myPanel.editedDocument = xmlDoc; parent.addChild(myPanel);

这是怎么回事：

docLabel文本字段最后为空（等于“”）

xmlDoc的@label属性设置为“”

我想要的是这样的：

docLabel文本字段应包含“some label”

只有当docLabel的text属性发生变化时，xmlDoc的@label属性才会发生变化。

如何使用Flex 3完成此操作？

修改

我也试过这个：

<mx:Panel> <mx:Script> <![CDATA[ [Bindable] public var editedDocument: XML; ]]> </mx:Script> <mx:TextInput id="docLabel"/> <mx:Binding source="editedDocument.@label" destination="docLabel.text"/> <mx:Binding source="docLabel.text" destination="editedDocument.@label"/> </mx:Panel>

结果是一样的。

Answer 1

您可以尝试使用BindingUtils在创建类之后以编程方式创建绑定： http://life.neophi.com/danielr/2007/03/programmatic_bindings.html

我已经习惯于解决类似的问题。如果您无法从链接中发现评论，我会挖掘我的源代码并查看我能找到的内容。

private function init():void 
{
  var xmlDoc: XML = <document label="some label" />;
  var myPanel: MyPanel = new MyPanel();
  myPanel.editedDocument = xmlDoc;
  parent.addChild(myPanel);
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "label");

  //or maybe it should be one of these, I have not done binding to an XML attribute before
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "@label");
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "{@label}");
}

Answer 2

看看Two-way data binding。看一下文本的一部分：

在Flex 3中，如果要设置   使用
进行双向绑定
MX：绑定

标记你需要设置两次： mx:Binding source="a.property" destination="b.property"/> mx:Binding source="b.property" destination="a.property"/>

变为：

mx:Binding source="a.property" destination="b.property" twoWay="true"/>

Answer 3

在Flex 3中，您最好做这样的事情。还不确定你可以直接绑定到XML吗？

而是做这样的事情：

        [Bindable] public var tmpString: String;


        public var onChange():void {
                tmpString = docLabel.text;
                //set the XML string, etc.
        }

    ]]>
</mx:Script>
<mx:TextInput id="docLabel" text="{tmpString}" change="onChange()" />

Answer 4

我认为双向数据绑定是Flex 4中的一项新功能。

Answer 5

这直接来自Adobe http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding及其Flex 3！

Answer 6

我创建了自定义控件，在给定具有名称与控件id匹配的合适属性的提供程序对象时，以编程方式创建双向绑定。以下是TextInput的示例：

public class BoundTextInput extends TextInput
{
  // some code omitted for brevity:
  // Create getter / setter pair, call invalidateProperties()
  // and set internal flag for efficiency

  // create bindings in commitProperties:
  override protected function commitProperties():void
  {
    if (this._fProviderChanged) {
      this._fProviderChanged = false;
      if (null != this._provider && this._provider.hasOwnProperty(this.id) && this._provider[this.id] is String) {
        // this is the core bit
        BindingUtils.bindProperty(this, "text", this._provider, this.id);
        BindingUtils.bindProperty(this._provider, this.id, this, "text");
      }
    }
    // Normally, you call the overridden method first,
    // but we want to see the values initialized by the new
    // binding right away, so we first create the bindings
    // and then commit all inherited properties
    super.commitProperties();
}

}

这是我在其他组件（弹出对话框）中使用它的示例。 data属性设置为相应模型类的实例，该类始终是一个愚蠢的[Bindable]容器。

<?xml version="1.0" encoding="utf-8"?>
<PopUp xmlns="com.econemon.suite.gui.components.*" xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Form width="100%" height="100%" >
    <mx:FormHeading label="Server-URL" />
    <mx:FormItem label="URL" >
      <!--
        If it is available, and of type String, data.urlServer
        is bound to the text property of this TextInput
      -->
      <BoundTextInput id="urlServer" provider="{this.data}"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button label="OK" click="this.submit(event)" />
    </mx:FormItem>
  </mx:Form>
</PopUp>

如何在Flex 3中创建双向数据绑定？

6 个答案: