绑定文本值与使用knockout的html元素未在浏览器中显示

Question

我是Knockout js的新手。请帮我理解问题所在。我处于一个非常关键的交付时间表，无法确定问题的位置。

以下是viewmodel

#!/usr/bin/perl
use warnings;
use strict;

my $arrayref1 = [[1,2], [3,4], [5,6]];
my $arrayref2 = [[1,2], [3,4], [7,8]];

my %set;
undef $set{ $_->[0] }{ $_->[1] } for @$arrayref1;

my @union = @$arrayref1;

for my $pair (@$arrayref2) {
    push @union, $pair unless exists $set{ $pair->[0] }{ $pair->[1] };
    undef $set{ $pair->[0] }{ $pair->[1] };
}

use Data::Dumper;
print Dumper \@union;

现在是html

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中，同一级别的数据未在浏览器中显示，

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

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

请你指导一下我错过的地方！

Answer 1

在你说的时候应该有一个错误：＆＃34;直到这一点为止数据绑定现在成功地发生在下一个html div中，同一级别的数据没有在浏览器中显示＆＃34;这不允许您的数据填充到您的视图中。

我没有完整的模型或模型的层次结构，但我试图通过创建配置文件视图模型和示例数据来模仿您所呈现的内容。我希望它有所帮助。

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