Data binding for the addtweet template

Once this is done, we need to now bind our data with the form and its field, as shown in the following code:

    <form data-bind="submit: addTweet"> 
      <div class="navbar"> 
        <div class="navbar-inner"> 
           <a class="brand" href="#">Tweet App Demo</a> 
        </div> 
       </div> 
       <div id="main" class="container"> 
 
        <table class="table table-striped"> 
          Username: <input data-bind="value: username"
placeholder="Username" type="username"></input> </div> <div> body: <textarea data-bind="value: body" placeholder="Content
of tweet" type="text"></textarea> </div> <div> </div> <button type="submit">Add Tweet</button> </table> </form>

Now we are ready to add our tweet through the template. We perform validation for tweets just as we performed validation for users.

In order to read the database and get the tweet list, add the following code to tweet.js:

    $.getJSON('/api/v2/tweets', function(tweetModels) { 
      var t = $.map(tweetModels.tweets_list, function(item) { 
      return new Tweet(item); 
     }); 
      self.tweets_list(t); 
     }); 

Now, we need to make changes in addtweets.html to show our tweet list. For that, let's add the following code:

    <ul data-bind="foreach: tweets_list, visible: tweets_list().length 
> 0"> <li> <p data-bind="text: username"></p> <p data-bind="text: body"></p> <p data-bind="text: timestamp"></p> </li> </ul>

Awesome! Let's test it out. It will look something like this:

In a similar fashion, you can extend this use case by deleting users from the web page application, or can update user information in the backend services.

Also, to know more about the knockout.js library, go through the live examples at http://knockoutjs.com/examples/helloWorld.html, which will help you gain a better understanding, and help you with implementing it in your application.

We created these web pages to make sure our microservices work and to give you an understanding about how a web application is developed generally; and, as developers, we can create these web applications based on our own use case as well.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.21.246.223