淘汰赛JS不绑定变量

问题描述

我正在创建一个使用Knockout JS的Laravel应用程序，并且无法使表单输入变量中的“ data-bind” 属性起作用。表单分为两部分，右侧是带有编辑链接的条目列表，左侧是进行编辑的字段。

编辑链接将正确填充编辑字段，并且对列表的更改成功并且数据库成功。

但是我的目的是在URL中是否包含子记录ID以及父ID。然后在加载时使用所选条目填充编辑字段。浏览器控制台中没有出现错误。

我是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,newPlan:  @if (isset($show['steps']) and count($show['steps']) == 0) true @else false @endif
    });
  @endif
  ko.applyBindings(planning);   
});
</script>

页面加载视图模型数据显示“当前”元素的填充 page onload view model。 KO后绑定视图模型数据显示“当前”元素post ko binding view model的填充。

下面包含包含要填充元素的适用Laravel Blade代码。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）