Question

我在DOM中有一个项目列表：

<ul id="my_list">
    <li class="relevant">item 1 <a onclick="remove(1)">Remove</a></li>
    <li class="relevant">item 2 <a onclick="remove(2)">Remove</a></li>
    ...
</ul>

用户可以通过单击项目中的相应“删除”链接从列表中删除项目。我想反应性地监视此列表的更改，以便在没有项目时，它会触发一个函数。例如：

var num_list_items = $("#my_list li.relevant").length;
if( num_list_items == 0 ){
    do_something();
}

我的应用程序是在Meteor中构建的，因此理想情况下想知道是否有任何可以执行此操作的本机功能。如果没有，欢迎任何其他建议。

Answer 1

您可以使用MutationObserver（link）

每次观察到的节点发生变异时，你都会用一些东西来实例化，如果变异报告了你想对它做某些事情的预期条件。

var observed = document.getElementById('my_list');
var whatIsObserved = { childList : true };
var mo = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
       if(mutation.type === 'childList'){
          //DOM Tree mutated
          if(mutated.target.querySelectorAll('li.relevant').length === 0){
             //mutated target has no childs.
          }
       }
    });
});
mo.observe(observed, whatIsObserved);

或者，让remove函数触发您的条件。

如何自动对DOM更改做出反应？

1 个答案: