0

我正在尝试在嵌套对象上实现两种方式绑定，下面是我的模板 

 {{#with referNames(names, active, contacts)}}
 <!-- also tried {{#with names[contacts[active].names[contacts[active].active]]}} -->
    {{name}}
    <input value="{{active.data}}" />
    <input type="button" value="clone active" on-click="clone" />
 {{/with}}

下面是我的数据结构 

{
   contacts : {
      one : {
        active : 0,
        names : ["Name1"] // Keys of names Object (Collection of All names)
      }, two : {
        active : 0,
        names : ["Name2"]
      }
   },
   names : { // Collection of All names
      Name1 : {
        name : "abc",
        active : {
            data : "Name1's data 1"
        }
      }, 
      Name2 : {
        name : "def",
        active : {
            data : "Name2's data 1"
        }
      }
   },
   active : "one",
   referNames : function(names, active, contacts){
      return names[contacts[active].names[contacts[active].active]];
   }
}

还有JS代码，

var r = new Ractive({
   template : "#template",
   el : document.body,
   data : data
});

r.on('clone', function() {
   var t = this, active = t.get('active'), 
    contacts = t.get('contacts.' + active),
    current = contacts.names[contacts.active],
    clone = t.get('names.' + current),
    someId = Math.random().toString(36).substring(7);

   t.set('names.' + someId, clone);
   t.unshift('contacts.' + active + '.names', someId);
   console.log(t.get('contacts'));
   console.log(t.get('names'));
});

预期的行为是，每当联系人中的名称数组或活动值发生更改时，文本框值和名称也应更新。目前它克隆当前并附加到各自的姓名和联系人，但未在 DOM 中更新。

我想做的是

在数据对象中，active属性是要从contacts对象键中使用的活动键。在示例中，因为它是“一”，这意味着contacts.one，所以值是

{ active : 0, names : ["Name1"] }

在上述对象中，keynames是该联系人的可用名称值，并且active是要使用的名称中的名称索引。它将被计算为 

active // one <global context>
names // data for each name value, <global context>
contacts[active] // contact.one
contacts[active].names // Available names for contact.one, so ["Name1", "Name2" etc..]
contacts[active].active // Index of name to be used in available names, in example its 0 
contacts[active].names[  contacts[active].active ] // Will be "Name1"
names["Name1"] // Name1 from above line

最后参考数据将是 

  Name1 : {
     name : "abc",
     active : {
        data : "Name1's data 1"
     }
  }

希望这很清楚，请让我知道如何解决此问题以动态更改活动更改时的引用数据。

4

0 回答 0