组件内部的装饰器没有用数据更新

Question

尽管 , I'm still having trouble with decorators being updated with the correct data. Unlike the cited question, now the decorator is inside a component. Here's the code (ref: this jsfiddle 中的建议）：

html:

<div id="container" />

<script type='template/racive' id='member_template'>
  <p id='name_{{name}}' decorator='sayname:{{name}},{{id}}'>
    {{id}}:{{name}}
    <a href='#'>say my name</a>
  </p>
</script>

和咖啡脚本：

Sayname = (node,name)->
  console.log "new decorator: #{name}"
  $(node).find('a').on 'click',->
    alert "I'm saying: #{name}"
  teardown : ->
    console.log "teardown #{name}"
    $(node).off('click')
  update : ->
    console.log "update #{$(node).attr('id')} to #{name}"

Ractive.decorators.sayname = Sayname

Member = Ractive.extend
  template: "#member_template"

window.family = new Ractive
  el : '#container'
  template: "{{#members}}<member name='{{name}}' id='{{id}}' />{{/members}}"
  data:
    members: [{id:1, name:"Barney"},
    {id:2, name:"Fred"},
    {id:3, name:"Wilma"},
    {id:4, name:"Pebbles"}]
  components:
    member: Member

console.log "init complete"

family.set('members',[{id:5,name:"Sneezy"},{id:6,name:"Sleepy"},{id:7,name:"Happy"},{id:8,name:"Grumpy"}])

初始化后和更新数据集后，单击具有装饰器提供的行为的 link 仍然是 returns 原始数据，而不是更新后的数据。

有什么建议吗？提前感谢您提供的任何见解。

Answer 1

两件事：

1) 装饰器函数应该 return 一个同时具有拆卸方法和可选的更新方法的对象（如果您希望它是可更新的） 2) 在更新方法中，提供了新的参数，您需要使用它们来更新装饰器状态。

以你的例子为例，在我最好的 coffeescript 中，应该是（见 https://jsfiddle.net/964qvry9/1/）：

Sayname = (node,name)->
  console.log "new decorator: #{name}"
  $(node).find('a').on 'click',->
    alert "I'm saying: #{name}"
  decorator =
    teardown : ->
      console.log "teardown #{name}"
      $(node).off('click')
    update : (newName) ->
      console.log "update #{$(node).attr('id')} to #{name}"
      name = newName

对于此用例，无需重新订阅点击事件，但该模式通常有助于您需要重新运行拆解和初始化逻辑的情况：

function myDecorator( node, param ){

    function init(param) {
        //do setup work
    }

    function teardown() {
        //do teardown work
    }

    init(param);

    return {
        teardown() { teardown(); },
        update(param) {
            teardown();
            init(param);
        }
    }


}

组件内部的装饰器没有用数据更新

decorator inside component does is not updated with data

ractivejs