Soy nuevo en Knockout js. Ayúdame a entender dónde está el problema. Estoy en un cronograma de entrega muy crítico y no puedo averiguar dónde está el problema.

Siguiente es el modelo de vista

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

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

Hasta este punto, la vinculación de datos está sucediendo con éxito ahora en el siguiente div html en el mismo nivel de los datos que no se muestran en el navegador,

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

Perdóneme si la cantidad de código que he publicado es demasiada, pero no puedo entender cómo transmitir el problema a menos que muestre exactamente mi código.

¿Podrías guiarme donde me falta algo?

1
Cool Nebula 21 jul. 2017 a las 01:25

2 respuestas

La mejor respuesta

¿Puede utilizar este código? Acabo de cambiar self.profiles (object) a self.profiles = ko.observable (object)

He editado tu código.

<!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>
0
Ram Bharlia 22 jul. 2017 a las 12:10

Debería haber un error en el que esté diciendo: "hasta este punto, la vinculación de datos se está realizando con éxito ahora en el siguiente div html en el mismo nivel de los datos que no se muestran en el navegador" que no permite que sus datos se completen en tu vista.

No tenía su modelo completo o su jerarquía de modelos, pero traté de imitar lo que presentó creando un modelo de vista de perfil y datos de muestra. Espero que ayude.

Ejemplo : 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);
0
Matin Kajabadi 21 jul. 2017 a las 14:49