RactiveJS：数据绑定文本区域导致 "cannot call removeChild with null"

Question

JSFiddle 有问题（打开控制台并按下按钮以查看错误）：http://jsfiddle.net/znkfemeg/1/

我是 Ractive 的新手，但这似乎是一个非常晦涩的错误。

目标是拥有一个只读文本区域，按下按钮时文本会更新。文本是代码，所以我使用三胡须来转义文本内容。

但是，按下按钮会引发

Uncaught TypeError: Cannot read property 'removeChild' of null in the triple.prototype.render method on the line: return node.parentNode.removeChild(node); where node in the debugger is the textnode (aka the textcontent of the textarea).

将文本更改为其他文本元素（例如 span、p）代码工作正常。

var copyarea = Ractive.extend({
    template: "#ract",
    data: function() {
        return {
         condition: 'one',
         options: {
                 "one":"Text 1", 
        "two":"Text 2"   
            }
        }
    },
    isolated: false,
    oncomplete: function () {
        var component = this;

        this.on("switch", function (event) {
            if (component.get('condition') === 'one') {
                component.set('condition', 'two');
            } else {
                component.set('condition', 'one');
            }
        });
    }
});

var ui = new Ractive({
    el: 'body',
    append: true,
    template: '#templ',
    components: {
        copyarea: copyarea
    }
});

.unused {
    color: gray;
    
}

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id="ract" type="text/ractive">
<textarea>{{{options[condition]}}} </textarea>
<button on-click="switch" class="change-condition">
  {{ #if condition === 'one' }}
   <span>One</span>
  {{ else }}
   <span class="unused">Two</span>
  {{ /if }}

  {{ #if condition === 'two' }}
   <span>One</span>
  {{ else }}
   <span class="unused">Two</span>
  {{ /if }}
</button>
</script>
<script id="templ" type="text/ractive">
    <copyarea>
</script>

为什么 textarea 不是其 textContent 的父节点有什么特别的原因吗？对于 RactiveJS 有一个 workaround/fix 吗？

Answer 1

您似乎发现了一个错误 – 我在 GitHub 上提出了一个 issue。 Ractive 真的不知道如何处理文本区域内的 HTML。

您可以使用常规胡须而不是三胡子（因为文本区域内无论如何都不能包含元素），并且您不会收到奇怪的错误消息，但也不会更新：http://jsfiddle.net/rich_harris/08pa2v3j/

所以正确的解决方法是使用 <textarea value='{{options[condition}}'> 代替：http://jsfiddle.net/rich_harris/a3e30030/

RactiveJS：数据绑定文本区域导致 "cannot call removeChild with null"

RactiveJS: Data-binding textarea causes "cannot call removeChild with null"

html

javascript

dom

mustache

ractivejs