【问题标题】:knockout binding issue: Anonymous template defined, but no template content was provided淘汰绑定问题:定义了匿名模板,但未提供模板内容
【发布时间】:2020-10-22 10:34:40
【问题描述】:

我有一些 javascript 代码可以打开一个模态并将绑定应用到我的淘汰视图模型。 当模式打开时,会出现第二个选项卡,单击时,它会触发一个 ajax 调用并设置一个带有返回数据的 observableArray(人,有时是一个空数组)。 下面的 html 代码遍历数组,并显示人员的姓名。

这在我第一次单击打开模式时工作正常,但对任何其他单击都不起作用,在控制台中显示错误 Anonymous template defined, but no template content was provided。 我在这上面花了 2 天时间,看不出问题出在哪里,尽管我怀疑它可能在我的绑定方法中。

我无法在笔中重新创建错误,因为它使用 Ajax 调用,我不知道如何模仿。

HTML:

...<other html, modal, tabs etc...>
            <div id="people" class="tab-pane">
                <form class="well form-horizontal" id="peopleForm">
                    <fieldset>
                        <legend>Registered</legend>
                        <div class="form-group" data-bind="visible: people().length > 0">
                            <div data-bind="foreach: people">
                                <div class="form-group">
                                    <div class="col-md-6 inputGroupContainer">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                            <input type="text" class="joinEventModalButtons" data-bind="value: $data.FullName" disabled />
                                        </div>
                                    </div>
                                    <div class="col-md-4 inputGroupContainer">
                                        <input type="button" value="Remove" class="btn btn-danger" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>

JS:

var myModel = function myViewModel() {
      self.people = ko.observableArray([{ "FullName": "Joe", "Email": "Joe@gmail.com" }]);

  // setTimeout to try mimic ajax call?
  setTimeout(function() {
    self.people([])
  }, 6000)
....
// ajax call within 'myModel' but also doesn't work  if I put it in the section where I show the modal
 $.ajax({
            url: "/api/people",
            type: "GET",
            success: function (data) {                
                self.people(data);
            },
            error: function (err) {
                alert(err.responseJSON.message);
            }
        });
}

JS 用于显示 Modal,应用绑定等...:

.. 在某些按钮上单击...:

 $('#myPeopleModal').on('hidden.bs.modal', function () {
     // do something....
 });

 ko.cleanNode(document.getElementById('myPeopleModal'));

 var myM = new myModel();
 ko.applyBindings(myM, document.getElementById('myPeopleModal'));
 $('#myPeopleModal').removeClass("hide").modal('show');
  1. 如果我用foreach: people 评论该部分,模式将毫无问题地打开和关闭。
  2. 如果我删除 ajax 调用并只保留 observable 集一次,模式打开和关闭不会出现问题。
  3. 我还在模型中设置了其他 observables,它们运行良好(为了简化而删除了它们)
  4. 我也尝试了 ko 注释语法,但得到了完全相同的结果

淘汰赛 3.5.1。

感谢您的帮助。

【问题讨论】:

    标签: data-binding foreach knockout.js


    【解决方案1】:

    查看第一个函数,在超时时通过简单的承诺伪造异步调用:)

    如果您不想在淘汰赛中挂钩 bs 事件,请记住将所有淘汰赛属性重置为其初始状态,以便下一个模式显示一切正常。

    这可能不是“最干净”的方式,因为我们在关闭模式时使用 jquery 重置到第一个选项卡,但老实说,如果你只需要模式上的 applyBindings,它到底是怎么工作的。

    console.clear();
    var $fakeAsync = function(api, result) {
      var dfd = $.Deferred(() => setTimeout(function() {
        dfd.resolve(result);
      }, 500));
      return dfd.promise();
    };
    
    ko.applyBindings(() => {
      var self = this;
      self.people = ko.observableArray([]);
      self.loading = ko.observable(false);
    
      self.activatePeople = function() {
        self.loading(true);
        self.people([]);
        $fakeAsync('/api/fake', ['john', 'karen', 'franz']).done(function(result) {
          self.people(result);
        }).always(() => self.loading(false));
      };
      self.resetOnClose = function() {
        $('#exampleModal #home-tab').click();
        self.people([]);
        self.loading(false);
        return true;
      };
    }, $('#exampleModal').get(0));
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-bind="click: resetOnClose">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="people-tab" data-toggle="tab" href="#people" role="tab" aria-controls="people" aria-selected="false" data-bind="click: activatePeople">People</a>
              </li>
            </ul>
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">click the people-tab above</div>
              <div class="tab-pane fade" id="people" role="tabpanel" aria-labelledby="people-tab"><span data-bind="visible: loading">loading..</span>
                <ul data-bind="foreach: people">
                  <li data-bind="text: $data"></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" data-bind="click: resetOnClose">Close</button>
            <button type="button" class="btn btn-primary" data-bind="click: resetOnClose">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2023-04-08
      • 2012-12-18
      • 1970-01-01
      • 2016-07-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-11-16
      相关资源
      最近更新 更多