Question

我正在尝试使javascript对象具有反应性，以便在更新子对象时，更新原始（父）对象 - 无论是在视图中还是在javascript中。

除了“完成？”之外，这几乎可以做到。单击按钮，console.log输出仅在第一次准确。之后，正确切换任何子项会更新视图，但基础javascript不会更新，因为子项目的“选定”值不再正确。

此外，我希望能够简化并简单地在任何子项切换为选中时更新父items对象。

我来自AngularJS，这简单得多 - 如果您传入一个对象然后更新该对象的属性，父属性也会更新并自动保持同步。

似乎this和数据上下文是getter而不是setter？ Template.currentData()似乎有关，但我无法让它工作： https://github.com/meteor/meteor/issues/2010

我得到更新项目的方法是通过设置和比较索引来手动更新它，以便从内部子数据上下文更新主要父对象，但这又不是理想的，并且当你得到更多的嵌套时，会变得更加混乱和混乱我需要所有嵌套索引能够回溯到主items对象，然后覆盖整个事件以强制更新。 How to Get Parent Data Context in Meteor on an Event

长话短说，我希望给定的数据上下文（来自一个事件）能够成为一个setter，如果我在{{#each}}并碰巧在项目[1] .subitem [2]然后我可以做this.selected =!this.selected然后有效地更新items[1].subitem[2].selected（反应性地 - 更新javascript对象本身和DOM）。所以后来我可以检查items[1].subitem[2].selected的值，并知道它的可靠性和准确性。目前我正在根据selected布尔值更新DOM，但父items数组不准确。

HTML /模板：

<template name="items">
  {{#each items}}
  <div class='item-title'>{{title}}</div>
  <div class='{{classes.cont}}'>
    {{#each subitem}}
      {{> subitems }}
    {{/each}}
  </div>
  {{/each}}

  <div class='btn btn-primary btn-block items-done'>Done?</div>
</template>

<template name="subitems">
  <div class='flexbox subitems'>
    <div class='flex1 pointer'>{{title}}</div>
    {{#if selected}}
    <div class='fa fa-check-circle'></div>
    {{else}}
    <div class='fa fa-plus-circle'></div>
    {{/if}}
  </div>
</template>

的Javascript

if (Meteor.isClient) {
var items1 =[
  {
    title: 'Item 1',
    subitem: [
        {
            title: 'Sub 1.1'
        },
        {
            title: 'Sub 1.2'
        },
        {
            title: 'Sub 1.3'
        }
    ]
},
{
    title: 'Item 2',
    subitem: [
        {
            title: 'Sub 2.1'
        },
        {
            title: 'Sub 2.2'
        },
        {
            title: 'Sub 2.3'
        }
    ]
}
];

var ii, jj;
for(ii =0; ii<items1.length; ii++) {
items1[ii].classes ={
  cont: 'hidden'
};
items1[ii].index =ii;   //Blaze / Spacebars does not yet give access to index? Maybe @index in html but no equivalent in `this` in javascript?

for(jj =0; jj<items1[ii].subitem.length; jj++) {
  items1[ii].subitem[jj].selected =false;
  items1[ii].subitem[jj].index =jj;
}
}

Template.items.created =function() {
  this.items =new ReactiveVar;
  this.items.set(items1);
};

Template.items.helpers({
  items: function() {
    return Template.instance().items.get();
  }
});

Template.items.events({
'click .item-title': function(evt, template) {
var items =template.items.get();
    if(this.classes.cont ==='visible') {
      this.classes.cont ='hidden';
    }
    else {
      this.classes.cont ='visible';
      //hide all others
      for(ii =0; ii<items.length; ii++) {
      if(ii !==this.index) {
        items[ii].classes.cont ='hidden';
      }
    }
    }

    template.items.set(items);
},

  'click .items-done': function(evt, template) {
    console.log(template.items.get());    //TESTING
}

});

Template.subitems.created =function() {
this.selected =new ReactiveVar;
this.selected.set(this.data.selected);
};

Template.subitems.helpers({
selected: function() {
return Template.instance().selected.get();
}
});

Template.subitems.events({
'click .subitems': function(evt, template) {
//toggle selected
this.selected =!this.selected;
template.selected.set(this.selected);
}
});
}

Answer 1

切换到（仅限本地）集合似乎使其成为被动的，我必须确实更新根（父）项（使用Template.parentData()）。所以基本上转换为并专门用作收藏品。有点烦人，似乎有点像黑客，但我想这是流星的点，模糊了服务器和客户端之间的界限 - 只需使用集合的一切，让内置的流星反应性发挥其魔力。

https://www.eventedmind.com/feed/meteor-ui-reactivity-in-slow-motion

if (Meteor.isClient) {
var items1 =[
{
    title: 'Item 1',
    subitem: [
        {
            title: 'Sub 1.1'
        },
        {
            title: 'Sub 1.2'
        },
        {
            title: 'Sub 1.3'
        }
    ]
},
{
    title: 'Item 2',
    subitem: [
        {
            title: 'Sub 2.1'
        },
        {
            title: 'Sub 2.2'
        },
        {
            title: 'Sub 2.3'
        }
    ]
}
];

var ii, jj;
for(ii =0; ii<items1.length; ii++) {
items1[ii].classes ={
  cont: 'hidden'
};
items1[ii].index =ii;   //Blaze / Spacebars does not yet give access to index? Maybe @index in html but no equivalent in `this` in javascript?

for(jj =0; jj<items1[ii].subitem.length; jj++) {
  items1[ii].subitem[jj].selected =false;
  items1[ii].subitem[jj].index =jj;
}
}

ItemCollection = new Meteor.Collection(null);
for(ii =0; ii<items1.length; ii++) {
ItemCollection.insert(items1[ii]);
}

Template.items.helpers({
items: function() {
return ItemCollection.find();
}
});

Template.items.events({
'click .item-title': function(evt, template) {
var items =ItemCollection.find().fetch();
    if(this.classes.cont ==='visible') {
      this.classes.cont ='hidden';
    }
    else {
      this.classes.cont ='visible';
      //hide all others
      for(ii =0; ii<items.length; ii++) {
      if(ii !==this.index) {
        //items[ii].classes.cont ='hidden';
        ItemCollection.update(items[ii]._id, {$set: {classes: {cont: 'hidden'} } });
      }
    }
    }

    //update current item
    ItemCollection.update(this._id, {$set: {classes: {cont: this.classes.cont } } });
},

'click .items-done': function(evt, template) {
console.log(ItemCollection.find().fetch());    //TESTING
}

});


Template.subitems.events({
'click .subitems': function(evt, template) {
//toggle selected
this.selected =!this.selected;

var itemId =Template.parentData(1)._id;
var setObj ={};
setObj['subitem.'+this.index+'.selected'] =this.selected;
console.log(itemId+' '+JSON.stringify(setObj));   //TESTING
ItemCollection.update(itemId, { $set: setObj});
}
});
}

Meteor Reactive嵌套对象更新父对象

1 个答案: