Передача объекта jscript модалу начальной загрузки в руле - PullRequest
0 голосов
/ 24 октября 2019

У меня есть список, сгенерированный Handlebars #each, когда кто-либо нажимается, модал должен перечислить характеристики. Модал открывается, но данные не отображаются. Обратите внимание, что console.log показывает объект.

<div class="row">
  <ul>
    {{#each dbBeer}}
      <div class="col-m-4 col-sm-4 col-xs-4">
        <button class="btn btn-block" onclick="showThisBeer({{json this}})">{{this.name}} /button>
      </div>
    {{/each}}
  </ul>
</div>

обратите внимание на помощника для разрешения json. jscript, чтобы справиться с этим:

var showThisBeer = function(stuff) {
   console.log(stuff);
   $("#showThisBeerModal").modal('toggle', function(){
     $(".modal-body #newData").val( stuff);
   });
};

открывает модальное окно, но я не могу отобразить данные - примечание: я пытался всеми способами найти различные элементы:

<!-- Modal to show the details of the selected beer  -->
<div class="modal fade" id="showThisBeerModal" role="dialog">
  <div class="modal-dialog">
     <!-- Modal content-->
     <div class="modal-content">
       <div class="modal-header">
          <h2>Details about this Beer</h2>
       </div>
       <div class="modal-body">
           <p>some content</p>
           <input type="text" name="newData" id="newData" value=""/>
       </div>
       <div class="col-md-6 modal-body">
           <input type="text" name="newData" id="newData" value="name">
           <div class="form-group">
              <p> some content </p>
              <input type="text" name="newData" id="newData" value={newData.name}>{{newData.name}}
           </div>
           <textarea class="form-control" id="{{newData.name}}"></textarea>
           <div class="form-group">
               <div class="btn btn-block" href="#" role="button" id="" > {{incommingData.color}}
               </div>
           </div>
           <div class="form-group">
               <input type="text" name="newData" id="" value="incommingData.feel"/>
           </div>
           <div class="form-group">
              <div class="btn btn-block" href="#" role="button" id=""> {{this.newData.style}}
              </div>
           </div>
           <div class="form-group">
              <div class="btn btn-block" href="#" role="button" id="newData" value={{newData.smell}}> </div>
           </div>
              <div class="form-group">
                 <div class="btn btn-block" href="#" role="button" id="" value="{{newData.feel}}"> {{newData.feel}}</div>
              </div>
           </div>
        </div>

        <div class="modal-footer">
            ...
        </div>
   </div>
</div>

Также обратите внимание, что журнал консоли показывает объект:

{id: 15, name: "Founders Doom", color: 5, hoppieness: 100, style: "IPA", …}
  color: 5
  feel: "Medium"
  hoppieness: 100
  id: 15
  name: "Founders Doom"
  smell: "Caramel"
  style: "IPA"
  triedThis: 0
  __proto__: Object
...