Original article: Step 3: Using Data Binding
Translated on: February 1, July 7, 2014
Translated by: Tie
The personal information card we created is pretty good, but for the whole application, only one card looks a little empty. In this section, Data Binding of polymer is used to display a series of cards.
To obtain data, you must use
<Post-service>Element. This element provides a very simple API for virtual social networks. In this section, you will use
PostsAttribute, which returns
PostArray composed of objects:
{ "uid": 2, "text" : "Loving this Polymer thing.", "username" : "Rob", "avatar" : "../images/avatar-02.svg", "favorite": false}
Edit post-list.html files
Go to the starter directory under the root directory and open it in the editor.
Post-list.htmlFile.
<LINK rel = "import" href = ".. /components/polymer/polymer.html "> <LINK rel =" import "href =" post-service.html "> <LINK rel =" import "href =" post-card.html "> <polymer-element name = "Post-list" attributes = "show"> <template> <style>: host {display: block; width: 100%;} post-card {margin-bottom: 30px ;}</style> <! -- Other labels can be added here -->...
Description:
- The file already contains<Post-service>Element import, so you can use it directly.
- AttributeAttributes = "show"A published property named show is created ).
One
Published Property(Publish attribute) means that one attribute can be configured in a tag, or two-way Data Binding can be used to connect to another attribute. You will use
ShowAttribute.
Bytes ------------------------------------------------------------------------------------
In the element's
<Template>Add
<Post-service>Element:
... <post-service id="service" posts="{{posts}}"> </post-service> ...
Description:
- Posts = "{posts }}"Attribute in<Post-service>Two-way data binding is added to your custom elements.
Data Binding
PostsProperty to a local property, also known
Posts). All methods you define in custom elements can be passed through
This. PostsAccess this response object.
Bytes ----------------------------------------------------------------------------------------------------------------
Display Dynamic list card
In
<Post-service>Add the following
<Div>And
<Template>Tags:
<div layout vertical center> <template repeat="{{post in posts}}"> <post-card>
Description:
- This new syntaxRepeat = "{post in posts }}"To make the TemplatePostsCreate a new instance for each item in the array.
- In each template instance{Post. Avatar }}) Will be replaced by the corresponding values in the item.
Edit the index.html File
Set
<Post-List>Element Import
Index.html
Open
Index.htmlAnd introduce
Post-list.htmlFile to add the import link. You can use
Post-list.htmlReplace existing
Post-card.htmlFile:
<link rel="import" href="post-list.html">
Bytes -------------------------------------------------------------------------------------
Use the <post-List> element.
Find
<Post-card>Element, and then replace it
<Post-List>:
...<div class="container" layout vertical center> <post-list show="all"></post-list></div>...
Test Results
Save (it is recommended to save it at any time during editing. This is a good coding habit)
Index.htmlFile, deploy, and then use chrome to open the link or refresh the page, for example:
Http: // localhost: 8080/polymer-tutorial-master/starter/index.html
The result is as follows:
Figure step 3 shows the effect after completion.
If an error occurs or is not displayed, you can
Step 3Directory
Post-list.html, index.htmlFile comparison, of course, you can also directly access this file to try the effect.
Practice:
Open
Post-service.htmlCheck the working mechanism of the component. Internally, it uses
<Core-Ajax>Element to execute the HTTP request.
Next section
Step 4: Close the work
