update bindings in ssr. (ampproject#19660)

noranazmy · Mar 22, 2019 · 90768ac · 90768ac
1 parent 7064e83
commit 90768ac
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 30 deletions.
diff --git a/examples/mustache-to-amp-view-host.amp.html b/examples/mustache-to-amp-view-host.amp.html
@@ -7,7 +7,7 @@
 -->
 <!-- -->
 <!doctype html>
-<html ⚡>
+<html ⚡ allow-viewer-render-template>
 <head>
   <meta charset="utf-8">
   <title>amp-mustache</title>
@@ -63,33 +63,21 @@
   <!--
     Variables are interpolated when the variable name is surrounded in double curly brackets (`{{varname}}`)
   -->
-  <amp-state id="remoteAnimals"
-  [src]="remoteAnimalUrl">
-  <script type="application/json">
-    {
-      "currentAnimal": "dog",
-      "dog": {
-        "imageUrl": "/img/clock.jpg",
-        "style": "greenBackground"
+  <amp-state id="data">
+      <script type="application/json">
+      {
+        "foo": "Data for amp-bind"
       }
-    }
-  </script>
-  </amp-state>
+      </script>
+    </amp-state>
 
-  <amp-list src="cart.json" layout="fixed-height" height="56">
-    <template type="amp-mustache">
-      {{title}}
-      <p style="position:absolute;top:120px;" [text]="'This is a ' + remoteAnimals.currentAnimal + {{title}}'.'">This is a dog.</p>
-      <button class="ampstart-btn caps m1" style="position:absolute;top:50px;"
-        on="tap:AMP.setState({'remoteAnimals': {'currentAnimal': 'cat'}})">
-        Set to Bird direct assignment
-      </button>
-      <button class="ampstart-btn caps m1" style="position:absolute;top:50px;"
-        on="tap:AMP.setState({'remoteAnimals': {'currentAnimal': 'cat'}})">
-        Set to Bird via remote url
-      </button>
-    </template>
-  </amp-list>
+  <amp-list id="list1" width="auto" height="100" layout="fixed-height" src="list.example.json" class="m1" reset-on-refresh>
+      <template type="amp-mustache" id="amp-template-id">
+        <div>
+          <a href="{{url}}">{{title}}</a>
+        </div>
+      </template>
+    </amp-list>
 
 </body>
 </html>
diff --git a/examples/viewer.html b/examples/viewer.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html allow-viewer-render-template>
+<html>
 <head>
   <meta charset="utf-8">
   <title>Viewer</title>
@@ -405,6 +405,8 @@
     Viewer.prototype.processRequest_ = function(name, data, awaitResponse) {
       log(this.id + ': Viewer.prototype.processRequest_', name);
       switch(name) {
+        case 'bindReady':
+          return Promise.resolve();
         case 'documentLoaded':
           return this.documentReady_();
         case 'focusin':
@@ -462,7 +464,11 @@
       // Mocked response.
       new Response
       return Promise.resolve({
-        "html": "<ul><li>Some list item</li><li>Some list item</li><li>Some list item</li></ul>",
+        "html":
+            "<ul>" +
+              "<li><p [text]='data.foo'></p></li>" +
+              "<li>Some list item</li>" +
+              "<li>Some list item</li></ul>",
         "body" : "",
         "init" : {
           "headers": {

diff --git a/extensions/amp-list/0.1/amp-list.js b/extensions/amp-list/0.1/amp-list.js
@@ -486,7 +486,8 @@ export class AmpList extends AMP.BaseElement {
     if (this.ssrTemplateHelper_.isSupported()) {
       const html = /** @type {string} */ (current.data);
       this.templates_.findAndSetHtmlForTemplate(this.element, html)
-          .then(element => this.render_([element], current.append))
+          .then(result => this.updateBindings_([result]))
+          .then(element => this.render_(element, current.append))
           .then(onFulfilledCallback, onRejectedCallback);
     } else {
       const array = /** @type {!Array} */ (current.data);

diff --git a/extensions/amp-list/0.1/test/test-amp-list.js b/extensions/amp-list/0.1/test/test-amp-list.js
@@ -444,6 +444,7 @@ describes.realWin('amp-list component', {
       it('should delegate template rendering to viewer', function*() {
         sandbox.stub(ssrTemplateHelper, 'fetchAndRenderTemplate')
             .returns(Promise.resolve({html: '<p>foo</p>'}));
+        sandbox.spy(list, 'updateBindings_');
 
         // Expects mutate/measure and hiding of loading/placeholder indicators.
         expectRender();
@@ -472,7 +473,7 @@ describes.realWin('amp-list component', {
         expect(ssrTemplateHelper.fetchAndRenderTemplate).to.be.calledOnce;
         expect(ssrTemplateHelper.fetchAndRenderTemplate)
             .to.be.calledWithExactly(element, request, null, attrs);
-
+        expect(list.updateBindings_).to.be.calledOnce;
         expect(list.container_.contains(rendered)).to.be.true;
       });
     });