Блог

Я создаю приложение Laravel, которое использует Knockout JS, и не могу заставить работать свойство «привязка данных» во входных переменных формы. Форма состоит из двух частей: правая сторона содержит список записей со ссылкой для редактирования, а левая сторона содержит поля, в которых выполняется редактирование.

Ссылка редактирования правильно заполнит поля редактирования, и изменения в списке и базе данных будут успешными.

Но я намереваюсь включить идентификатор дочерней записи в URL, а также родительский идентификатор. Затем заполните поля редактирования выбранной записью при загрузке. В консоли браузера не отображаются ошибки.

Я новичок в Laravel и очень новичок в Knockout JS. Есть идеи относительно причины моей проблемы?

Страница JS

 <script type="text/javascript">
$(function() {
  var stepsOb = JSON.parse(JSON.stringify({!! $show['steps'] !!}));
  var steps = $.isPlainObject(stepsOb) ? [] : stepsOb;
  @if (!empty($show['selectedStep']))
    var editStepsOb = JSON.parse(JSON.stringify({!! $show['selectedStep'] !!}));
    var editStep = $.isPlainObject(editStepsOb) ? [] : editStepsOb;
    var planning = new Planning({
        steps: steps,
        completed: {{ $show['goal']['completed'] ? 'true' : '0' }},
        id: {{ $show['goal']['goal_id'] }},
        newPlan:  @if (isset($show['steps']) and count($show['steps']) == 0) true @else false @endif,
        currentStep: {{ $show['selectedStep']->id }},
        currentDescription: '{{ $show['selectedStep']->description }}',
        currentWhen: '{{ $show['selectedStep']->do_it_when }}',
        currentDate: '{{ $show['selectedStep']->date }}',
        isNew: false
    });
  @else
    var planning = new Planning({
        steps: steps,
        completed: {{ $show['goal']['completed'] ? 'true' : '0' }},
        id: {{ $show['goal']['goal_id'] }},
        newPlan:  @if (isset($show['steps']) and count($show['steps']) == 0) true @else false @endif
    });
  @endif
  ko.applyBindings(planning);   
});
</script>
  

Данные модели просмотра при загрузке страницы, показывающие совокупность «текущих» элементов
модель представления при загрузке страницы.
Данные модели представления после привязки KO, показывающие совокупность «текущих» элементов после привязки ko модели представления.

Применимый блейд-код Laravel, содержащий элементы, которые необходимо заполнить, приведен ниже.

 <input type="hidden" value="" id="id" />                    
<div role="tabpanel" class="tabpanel-plan">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#iwill" role="tab" data-toggle="tab"></a></li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="iwill">
      <input type="text" data-bind="textInput: currentDescription" name="description" class="form-control" data-bv-notempty="true" />
    </div>
  </div>
</div>
                            
<div role="tabpanel" class="tabpanel-plan" id="willdoit">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" data-bind="css: { active: showDate() }"><a href="#doiton" role="tab" data-toggle="tab"></a></li>
    <li role="presentation" data-bind="css: { active: showWhen() }"><a href="#everytime" role="tab" data-toggle="tab">I will do this every...</a></li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" data-bind="css: { active: showDate() }" id="doiton">
      <div class="has-feedback">
        <div class="date">
          <input data-bind="pickadate: currentDate" type="text" name="date" id="date" data-bv-date="true" class="form-control" placeholder="Select a date" data-bv-field="when" />
        </div>
        <span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
     </div>
   </div>
   <div role="tabpanel" class="tab-pane" data-bind="css: { active: showWhen() }" id="everytime">
    <input type="text" name="when" data-bind="textInput: currentWhen" placeholder="Enter when you're going to do it" class="form-control" data-bv-field="when" />
   </div>
  </div>
</div>