组件上的计算值 setter

Question

Person = Ractive.extend({
  template: "<p>the person named {{name}}</p>",
  computed: {
      name: {
          get: function(){
              if(typeof(this.get('_name'))=='undefined'){return "nameless"}
              else{return this.get('_name')}
            },
          set: function(val){
              this.set('_name',val)
            }
      }
  }
});

people_model = new Ractive({
  el: '#people_container',
  template: '{{#people}}<person/>{{/}}',
  data: {
    people: [{},{},{}]
  },
  components :{person : Person}
});

people_model.set('people.0.name','Spongebob')

我不明白为什么最后一行不调用 'name' 计算属性上的 setter 然后更新呈现的模板。请有人提供任何见解。

提前致谢

Answer 1

简短的回答是计算属性 'owned' 由它们所在的组件决定；您无法通过他们的 parent 与他们互动。我写了一些关于为什么会这样 here - 它没有准确描述你的情况，但事实是 Person 组件的 name 和 [=它涉及的 object 的 11=] 属性。 name 被有效遮蔽了。

这是一件好事，因为它使代码更容易理解和推理 - 如果一个 object 填充了额外的值只是因为它们与组件上的计算属性一致（即每个 [= people 数组中的 30=] 会突然得到一个 name: 'nameless' 属性)，你很容易陷入 brain-bending 的境地，试图找出一些数据来自哪里你的应用程序。

所以解决方案是使用 'proxy' 计算属性作为真实 name 属性的访问器，像这样：http://jsfiddle.net/muoz44ec/ .请注意，我们明确地将组件内的 name 链接到 object.

人的 this.name

组件上的计算值 setter

computed value setter on a component

ractivejs