Question

我正在尝试实施two way binding on nested Objects，以下是我的模板

 {{#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对象键使用的活动密钥。例如，因为它是＆＃34;一个＆＃34;，这意味着contacts.one，所以值是

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

在上面的对象中，键names是该联系人的可用名称值，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"
     }
  }

希望这是明确的，请告诉我如何解决此问题，以动态更改有关活动更改的参考数据。

嵌套对象的双向绑定失败

0 个答案: