是否可以动态更新extjs5中的绑定?

时间:2015-02-12 04:38:06

标签: javascript data-binding extjs5

我正在尝试在extjs5中动态更改绑定,我无法弄清楚这是甚至是可能的,或者我是否完全以错误的方式解决这个问题。我会尝试解释我想要做的事情。我有一个textarea定义如下:

id: 'final-view',
xtype: 'textareafield',
editable: false,
bind:{
  value: '{r.options}'
}

在我的viewModel中我有:

data: {
  r:{
    options: {}
  }
}

该页面的布局如下:

textarea
"Add Option" button
option 1
...
option n

我有一个按钮"添加选项"它会在页面中添加一个包含选项存储的组合框,然后他们可以从下拉列表中选择一些内容并在组合中输入额外的内容。创建组合时,我有一个递增的变量,这个数字用于创建唯一的ID:

var new_opt = 'r.options.opt_' + cnt;

这用于向r.options对象添加元素,如下所示:

viewModel.set(new_opt, '');

创建的每个组合都有一个定义为:

的绑定
bind: {
  value: '{r.options.opt_' + this.id.substr(14) + '}'
}

其中" this.id.substr(14)"是我的cnt变量,即1.因此第一个选项的值bind是" {r.options.opt_1}"。 最终目标是将每个组合框中的所有内容连接起来并绑定到textarea。我想要做的是在添加选项时动态更新textareafield的绑定,以便在输入任何组合框时更新最终视图。因此,例如,如果有2个选项,则视图模型中的数据对象将如下所示:

data: {
  r:{
    options: {opt_1: 'value1', opt_2: 'value2'}
  }
}

因此,我希望将我的绑定更改为:

id: 'final-view',
xtype: 'textareafield',
editable: false,
bind:{
  value: '{r.options.opt_1} {r.options.opt_2}'
}

在textarea中你会看到内容" value1 value2"。我想要避免的是每次通过循环遍历" r.options"中的所有元素,从头开始重新填充textarea。对象和更改值,所以我想如果有一种方法来更新值字段的绑定,这将更有效。任何帮助或指导都将不胜感激,我对MVVM范例仍然相当新。

2 个答案:

答案 0 :(得分:3)

您很可能正在寻找setBind()方法。

仅仅是我的2美分:整个事情看起来过于复杂,即使您找到了如何使其工作的方法,也可以考虑简化它。

答案 1 :(得分:1)

您无需明确设置绑定。

viewModel.setData('newValue')将完成工作。

另外,您是否将数据存储在任何地方?如果是这样,可能需要将其绑定到store.model字段值,然后在更改数据时将自动更新共享该模型实例的任何其他视图。如果是这种情况,你可能会将textarea绑定到'{model.field}',其余的只是自动发生。

我希望这会有所帮助。