javascript - 是否可以动态更新 extjs5 中的绑定(bind)？

Question

我正在尝试在 extjs5 中动态更改绑定(bind)，但我不太清楚如何或是否可能这样做，或者我是否完全以错误的方式进行处理。我将尝试解释我正在尝试做什么。我有一个文本区域定义如下:

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):

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

其中“this.id.substr(14)”是我的cnt变量，即1。因此第一个选项的值绑定(bind)是“{r.options.opt_1}”。最终目标是将每个组合框中的所有内容连接并绑定(bind)到文本区域。我想要做的是在添加选项时动态更新文本区域字段的绑定(bind)，这样当在其中键入任何组合框时都会更新最终 View 。例如，如果有 2 个选项， View 模型中的数据对象将如下所示:

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

因此，我想将我的绑定(bind)更改为如下:

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

在文本区域中您将看到内容“value1 value2”。我想避免的是每次通过循环遍历“r.options”对象中的所有元素并更改值来从头开始重新填充文本区域，所以我想是否有一种方法可以更新值字段的绑定(bind)会更有效率。任何帮助或指导将不胜感激，我对 MVVM 范式还很陌生。

Answer 1

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

只是我的 2 美分:整个事情对我来说看起来过于复杂，即使你找到了让它发挥作用的方法，请考虑简化它。