1

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!

Cool Nebula
  • 15
  • 4
  • Can you explain "the data is not showing"? Is it just the `profile_summary` that doesn't show? Can you see the button in the `.profileSection` `
    `?
     – Cᴏʀʏ Jul 20 '17 at 22:30
  • I have created a [fiddle](https://jsfiddle.net/asindlemouat/00rhdjzj/1/) with your code, and fixed a few unended `` tags and an unclosed `
    ` . If you could update the fiddle with some more code and a sample of the data it might help to debug it further, then share your updated fiddle.
     – AMouat Jul 21 '17 at 07:31
  • Thanks it was related to html mark up issue. – Cool Nebula Jul 22 '17 at 23:32

2 Answers2

0

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);
Matin Kajabadi
  • 3,414
  • 1
  • 17
  • 21
0

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@test.com",
      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: "mgr@email.com",
      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>
Ram Bharlia
  • 62
  • 3