binding text value with html element using knockout is not showing in the browser

Question

I am new to Knockout js. Please help me understand where is the issue. I am in a very critical delivery schedule and not able to figure out where is the issue.

following is the viewmodel

self.profile({
          profileicon: ko.observable(imageurl), //'https://raw.githubusercontent.com/Ora-digitools/oradigitools/master/UI_Assets/Profile-list-page/default-user-icon.png',
          name: ko.observable(profiles.items[0].display_name),
          title: ko.observable(profiles.items[0].title),
          work_email: ko.observable(profiles.items[0].work_email),
          work_phone: ko.observable(profiles.items[0].work_phone != undefined ? profiles.items[0].work_phone : profiles.items[0].mobile_phone),
          mobile_phone: ko.observable(profiles.items[0].mobile_phone != undefined ? profiles.items[0].mobile_phone : profiles.items[0].work_phone),
          city: ko.observable(profiles.items[0].city),
          state: ko.observable(profiles.items[0].state),
          country: ko.observable(profiles.items[0].country),
          uuid: ko.observable(profiles.items[0].uuid),
          ou: ko.observable(profiles.items[0].ou),
          cost_center: ko.observable(profiles.items[0].cost_center),
          pillar: ko.observable(profiles.items[0].pillar),
          center: ko.observable(profiles.items[0].center),
          mgr_email: ko.observable(profiles.items[0].mgr_email),
          mgr_display_name: ko.observable(profiles.items[0].mgr_display_name),
          profile_summary: ko.observable(profiles.items[0].profile_summary != undefined ? profiles.items[0].profile_summary : "no contents available!"),
          skills: self.skills_skills,
          interests: self.skills_interests,
          learnings: self.skills_learning
        });

Now the html

<div class="row profileblackBg" data-bind="with: profile">
  <div class="container">Where are we: <a href="#">SE Faces</a> / <a href="#"><span data-bind="text: name"></a></div>
</div>
<div class="row blueBg" data-bind="with: profile">
  <div class="container">
    <div class="col-sm-5 col-md-4 profileleft nopadding">
      <!-- Image -->

      <div class="col-xs-7 col-md-5 col-lg-4  profileImage nopadding"><img data-bind="attr: {src: profileicon}" class="profileThumb">
        <div class="overlay">
          <div class="text">
            <button type="button" data-toggle="modal" data-target="#editimage"><span class="glyphicon glyphicon-camera"></span>Change Picture</button>
          </div>
        </div>
      </div>
      <!-- Image -->
      <!-- Name -->
      <div class="col-xs-5 col-sm-6 profileDetails nopadding"><span class="profileName" data-bind="text: name"></span><br>
        <span class="profileTitle" data-bind="text: title"></span></div>
      <!-- Name -->
    </div>
    <!-- Contact -->
    <div class="col-sm-4 col-md-3 profilePhone">
      <p><img src="css/images/phone_icon.png">&nbsp;Work Phone: <span data-bind="text: work_phone"></p>
      <p><img src="css/images/mobile_icon.png">&nbsp;Mobile:  <span data-bind="text: mobile_phone"></p>
      <p><img src="css/images/email_icon_pink.png">&nbsp; <span data-bind="text: work_email"></p>
    </div>
    <!-- Contact --> 
    <!-- Hub -->
    <div class="col-sm-3 col-md-3 profileAddress">
      <div>
        <button type="button" class="btn  btn-info btn-xs pull-right" data-toggle="modal" data-target="#editlocation">Edit</button>
      </div>
      <p>Hub: <br>
        <span data-bind="text: center"></p>
      <p>Pillar: <br>
        <span data-bind="text: pillar"></p>
    </div>
    <!-- Hub --> 
  </div>
</div>

up until this point data binding is successfully happening now in the next html div in the same level of the data is not showing in the browser,

<div class="profileSection" data-bind="with: profile">
              <div class="greyBg profileSummaryh">Profile summary
                <button type="button" class="btn  btn-info btn-xs pull-right" data-toggle="modal" data-target="#editsummary">Edit</button>
              </div>
              <div class="profileSummary">
                <span data-bind="text: profile_summary">
              </div>
</div>

forgive me if the amount of code I have posted is too much but I could not understand how to convey the issue unless I show exactly my piece of code.

Can you please guide me where I am missing something!

Answer 1

can you please use this code. I have just changed self.profiles(object) to self.profiles = ko.observable(object)

I have edited your code.

<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script>

<div id="test">
   <div class="row profileblackBg" data-bind="with: profile">
      <div class="container">Where are we: <a href="#">SE Faces</a> / <a href="#"><span data-bind="text: name"></a></div>
   </div>
   <div class="row blueBg" data-bind="with: profile">
      <div class="container">
         <div class="col-sm-5 col-md-4 profileleft nopadding">
            <!-- Image -->
            <div class="col-xs-7 col-md-5 col-lg-4  profileImage nopadding">
               <img data-bind="attr: {src: profileicon}" class="profileThumb">
               <div class="overlay">
                  <div class="text">
                     <button type="button" data-toggle="modal" data-target="#editimage"><span class="glyphicon glyphicon-camera"></span>Change Picture</button>
                  </div>
               </div>
            </div>
            <!-- Image -->
            <!-- Name -->
            <div class="col-xs-5 col-sm-6 profileDetails nopadding"><span class="profileName" data-bind="text: name"></span><br>
               <span class="profileTitle" data-bind="text: title"></span>
            </div>
            <!-- Name -->
         </div>
         <!-- Contact -->
         <div class="col-sm-4 col-md-3 profilePhone">
            <p><img src="css/images/phone_icon.png">&nbsp;Work Phone: <span data-bind="text: work_phone"></p>
            <p><img src="css/images/mobile_icon.png">&nbsp;Mobile:  <span data-bind="text: mobile_phone"></p>
            <p><img src="css/images/email_icon_pink.png">&nbsp; <span data-bind="text: work_email"></p>
         </div>
         <!-- Contact --> 
         <!-- Hub -->
         <div class="col-sm-3 col-md-3 profileAddress">
            <div>
               <button type="button" class="btn  btn-info btn-xs pull-right" data-toggle="modal" data-target="#editlocation">Edit</button>
            </div>
            <p>Hub: <br>
               <span data-bind="text: center">
            </p>
            <p>Pillar: <br>
               <span data-bind="text: pillar">
            </p>
         </div>
         <!-- Hub --> 
      </div>
   </div>
   <div class="profileSection" data-bind="with: profile">
      <div class="greyBg profileSummaryh">Profile summary
         <button type="button" class="btn  btn-info btn-xs pull-right" data-toggle="modal" data-target="#editsummary">Edit</button>
      </div>
      <div class="profileSummary">
         <span data-bind="text: profile_summary">
      </div>
   </div>
</div>


<script type="text/javascript">
    var profiles = {
   items: [{
      display_name: "Mike ABC",
      title: "My Title",
      work_email: "[email protected]",
      work_phone: "123456789",
      mobile_phone: "987654321",
      city: "Los Angeles",
      state: "CA",
      country: "USA",
      uuid: "6c84fb90-12c4-11e1-840d-7b25c5ee775a",
      ou: " This is ou",
      cost_center: "This is cost_center",
      pillar: "This is pillar",
      center: "This is center",
      mgr_email: "[email protected]",
      mgr_display_name: "mg name here",
      profile_summary: "This is your profile summary "
   }]
}
    var Vm = function() {
    var self = this;
self.profile = ko.observable({
          profileicon: ko.observable('https://raw.githubusercontent.com/Ora-digitools/oradigitools/master/UI_Assets/Profile-list-page/default-user-icon.png'), //'https://raw.githubusercontent.com/Ora-digitools/oradigitools/master/UI_Assets/Profile-list-page/default-user-icon.png',
          name: ko.observable(profiles.items[0].display_name),
          title: ko.observable(profiles.items[0].title),
          work_email: ko.observable(profiles.items[0].work_email),
          work_phone: ko.observable(profiles.items[0].work_phone != undefined ? profiles.items[0].work_phone : profiles.items[0].mobile_phone),
          mobile_phone: ko.observable(profiles.items[0].mobile_phone != undefined ? profiles.items[0].mobile_phone : profiles.items[0].work_phone),
          city: ko.observable(profiles.items[0].city),
          state: ko.observable(profiles.items[0].state),
          country: ko.observable(profiles.items[0].country),
          uuid: ko.observable(profiles.items[0].uuid),
          ou: ko.observable(profiles.items[0].ou),
          cost_center: ko.observable(profiles.items[0].cost_center),
          pillar: ko.observable(profiles.items[0].pillar),
          center: ko.observable(profiles.items[0].center),
          mgr_email: ko.observable(profiles.items[0].mgr_email),
          mgr_display_name: ko.observable(profiles.items[0].mgr_display_name),
          profile_summary: ko.observable(profiles.items[0].profile_summary != undefined ? profiles.items[0].profile_summary : "no contents available!"),
          skills: self.skills_skills,
          interests: self.skills_interests,
          learnings: self.skills_learning
        });
};

ko.applyBindings(new Vm());
</script>


</body>
</html>

Answer 2

There should be an error where you are saying :"up until this point data binding is successfully happening now in the next html div in the same level of the data is not showing in the browser" that doesn't allow your data gets populated into your view.

I didn't have your complete model or your hierarchy of models but I tried to sort of mimic what you presented by creating a profile view model and a sample data. I hope it helps.

Example :https://jsfiddle.net/njr3fqmo/6/

var profileVM = function() {
   var self = this;
   self.profileicon = ko.observable("https://raw.githubusercontent.com/Ora-digitools/oradigitools/master/UI_Assets/Profile-list-page/default-user-icon.png");
   self.name = ko.observable(profiles.items[0].display_name);
   self.title = ko.observable(profiles.items[0].title);
   self.work_email = ko.observable(profiles.items[0].work_email);
   self.work_phone = ko.observable(profiles.items[0].work_phone != undefined ? profiles.items[0].work_phone : profiles.items[0].mobile_phone);
   self.mobile_phone = ko.observable(profiles.items[0].mobile_phone != undefined ? profiles.items[0].mobile_phone : profiles.items[0].work_phone);
   self.city = ko.observable(profiles.items[0].city);
   self.state = ko.observable(profiles.items[0].state),
   self.country = ko.observable(profiles.items[0].country);
   self.uuid = ko.observable(profiles.items[0].uuid);
   self.ou = ko.observable(profiles.items[0].ou);
   self.cost_center = ko.observable(profiles.items[0].cost_center);
   self.pillar = ko.observable(profiles.items[0].pillar);
   self.center = ko.observable(profiles.items[0].center);
   self.mgr_email = ko.observable(profiles.items[0].mgr_email);
   self.mgr_display_name = ko.observable(profiles.items[0].mgr_display_name);
   self.profile_summary = ko.observable(profiles.items[0].profile_summary != undefined ? profiles.items[0].profile_summary : "no contents available!");
   self.skills = self.skills_skills;   // where does self.skills_skills define ?
   self.interests = self.skills_interests;  // where does self.skills_interests define ?
   self.learnings = self.skills_learning  // where does self.skills_learning  define ?
}

var vm = new profileVM();
ko.applyBindings(vm);