浏览器中未显示使用挖空的 html 元素的绑定文本值

Question

我是 Knockout js 的新手。请帮助我了解问题出在哪里。我的交货时间非常紧迫，无法弄清楚问题出在哪里。

以下是视图模型

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
        });

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

直到此时数据绑定成功发生在下一个 html 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>

如果我发布的代码量太多，请原谅我，但除非我准确显示我的代码，否则我无法理解如何传达问题。

你能指导我哪里遗漏了什么吗？

Answer 1

您所说的应该是错误的："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" 不允许您的数据填充到您的视图中。

我没有您的完整模型或您的模型层次结构，但我试图通过创建剖面视图模型和样本数据来模仿您呈现的内容。希望对你有帮助。

示例：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);

Answer 2

你能使用这个代码吗？我刚刚将 self.profiles(object) 更改为 self.profiles = ko.observable(object)

我已经编辑了你的代码。

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

浏览器中未显示使用挖空的 html 元素的绑定文本值

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

knockout.js

binding-context