text binding is not working

[Angan Sen]

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 untill this point data binding is successfully happening now in the next html div is none of the data is coming,

<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>

Can you please guide me where I am missing something.

[noirabys]

your html code is not valid,

add an closing </span> tag

best regards,

noirabys