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

Question

我正在尝试在 extjs5 中动态更改绑定，但我不太清楚这是如何实现的，或者这是否可能，或者我是否只是以完全错误的方式进行此操作。我将尝试解释我要做什么。我有一个文本区域定义如下：

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

在我的 viewModel 中有：

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

页面布局如下：

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

我有一个按钮 "Add Option"，它向页面添加了一个组合框，其中包含一系列选项，然后他们可以 select 从下拉列表中选择一些内容，并在组合框中输入额外的内容。创建组合后，我有一个递增的变量，这个数字用于创建唯一的 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。因此第一个选项的绑定值是“{r.options.opt_1}”。最终目标是将每个组合框的所有内容连接起来并绑定到文本区域。我想要做的是在添加选项时动态更新 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}'
}

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

Answer 1

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

我的 2 美分：整个事情对我来说看起来过于复杂，即使您找到了使其工作的方法，也请考虑简化它。

Answer 2

您不需要显式设置绑定。

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

此外，您是否将这些数据存储在任何地方？如果是这样，也许您需要将它绑定到一个 store.model 字段值，然后共享该模型实例的任何其他视图都将在数据更改时自动更新。如果是这种情况，您可能会将文本区域绑定到“{model.field}”，其余的将自动发生。

希望对您有所帮助。

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

Is it possible to dynamically update a bind in extjs5?

javascript

data-binding

extjs5