Why are template divs showing as “:hidden” in afterRender?

问题

Why are template divs showing as ":hidden" in afterRender?

Here's the code:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
  <script src="js/jquery.tmpl.js"></script>
  <script src="js/knockout-1.2.1.debug.js"></script>
  <script>
  $(document).ready(function() {
        m = function (name)
        {
          this.name = name;
        }

        viewModel = {
          a : ko.observableArray(),
          sparkie : function (elements) {
            div = elements[0];
            console.log($(div).is(':hidden'));
          },
        }

        ko.applyBindings(viewModel);

        viewModel.a.push(new m('oh-no'));
    });
    </script>
</head>
<body>

<script type="text/html" id="tpl">
  <div> ${ $data.name } </div>
</script>

<div data-bind='template: { name: "tpl", foreach: a, afterRender: sparkie }'></div>

</body>
</html>

回答1:

When afterRender is called for the template binding in foreach mode, the elements have not been added to the DOM yet. Some additional processing is done to make sure that nodes are efficiently added/removed.

However, you can instead use the afterAdd callback when using the foreach option to execute code after the elements are in the DOM.

回答2:

afterRender is for

custom post-processing logic on the DOM elements generated by your templates

BUT unfortunately it is invoked after your template is ready (applied on the DOM), but it's not inserted into the html just yet.

If you’re using foreach, Knockout will invoke your afterRender callback for each item added to your observable array

but if will also be invoked once if you are passing the data for the template.

KO allows you to give afterAdd and/or beforeRemove callbacks to manipulate the added/removed DOM elements in a custom way

so those will be invoked for every added/removed item in the observableArray. When these are being called your DOM is ready, so you it won't be hidden anymore, but these callbacks are only invoked when the underlying observableArray is changed.

<div data-bind="template: { name: 'tpl', foreach: a, afterAdd: sparkie }"></div>

来源：https://stackoverflow.com/questions/6207294/why-are-template-divs-showing-as-hidden-in-afterrender

标签

javascript

knockout.js