Question

我正在尝试使用Rivets数据绑定库创建可重用的组件（模板）。 jsFiddle在这里有概念证明： https://jsfiddle.net/Zireael/ok6haqxg

const obj_Labels = {
  id: [{
    "text": "AAA",
    "color": "red",
    "sth": "qwe"
  }, {
    "text": "HHH",
    "color": "green",
    "sth": "zxc"
  }, {
    "text": "KKK",
    "color": "blue",
    "sth": "jkl"
  }]

}

function testComponentViewModelCol(obj) {
  const self = this;
  self.data = obj;
}

rivets.components['colorized'] = {
  //attributes: ['colorx'],
  template: function(el, data) {
    return '<input rv-value="data.colorx">';
  },
  initialize: function(el, data) {
    return new testComponentViewModelCol(data, el);
  }
  //() => new Object()
};

rivets.configure({
  preloadData: true,
  templateDelimiters: ['{{', '}}']
})

const rivetBinding = rivets.bind(rvapp, {
  ['rvLabels']: obj_Labels
})

问题在于，组件创建的DOM元素不再与数据双向绑定（在jsfiddle的蓝色框中键入-创建的三个文本字段在创建后不会更新其值）。我从发现的几个组件示例中调整了逻辑。我要么做错了整个事情，要么没有向组件代码中添加足够的“反馈”逻辑，一旦将元素添加到DOM中，就无法跟踪数据模型。

我想做的是创建一个组件，该组件采用一个数据绑定并在应用了该数据绑定的情况下生成一个或多个DOM / HTML元素（例如更改可见性，基于绑定数据的更改的CSS样式属性）。

所以，而不是多次

<input rv-value='xxx.aaa' rv-style='xxx.yyy' rv-visible='xxx.zzz'>

我想要

<componentX rv-data='xxx'>

输出一个或多个（每个rv）DOM元素（如格式化的输入文本字段），并绑定回数据模型。

我非常感谢指针/反馈。

Rivets.js组件-在rv-each中保持双向绑定

0 个答案: