javascript - 使用 javascript 从 txt 文件读取文本并显示在引导模式对话框中(通过 knockout 绑定(bind))

Question

我正在尝试编写一个函数，该函数将从 .txt 文件(目前位于网站的根目录中)读取数据，然后将其显示在模式对话框中。我感觉我已经快到了，因为当我 Debug模式时文件被识别，但它没有显示任何内容:

HTML 按钮:

<button class="btn btn-mini btn-success" 
        data-toggle="modal" 
        data-target="#openLog" 
        data-bind="click: GetLog">
        Start
</button>

Knockout.js 虚拟机:

GetLog = function () {
    dataServices.getLog();
}

HTML 模态:

<div class="modal fade" id="openLog" tabindex="-1" role="dialog" aria-labelledby="openLogLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="openLogLabel">Today's Log</h4>
            </div>
            <div class="modal-body" id="logText">
                <script>
                    window.onload = function () {
                        dataServices.getLog();
                    }
                </script>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Javascript (dataServices.js)

getLog = function() {
    return $.ajax({
        url: 'Text.txt',
        dataType: 'text',
        success: function (text) {
            getLog.logContents = text;
            $("#logText").text(text);
        }
    })
};

Javascript 正常获取文件名，但不返回任何文本，因此模式弹出窗口只是空白。任何人都可以帮助我解决这个问题吗？谢谢。

Answer 1

你应该使用可观察的

var vm = {
  observable: ko.observable(''),
  getLog: function() {
      var self = this;
      return $.ajax({
          url: 'Text.txt',
          dataType: 'text',
          success: function (text) {
              self.observable(text);
          }
      })
  }
};
ko.applyBindings(vm);
vm.getLog();

在 html 中你应该调用它...

<div class="modal-body" id="logText">
    <span data-bind="text: observable"></span>
</div>