使用javascript从txt文件读取文本，并在引导模式对话框中显示（通过组合键绑定）

Question

I'm trying to write a function which will read data from a .txt file (which for the moment, is residing in the root directory of website) and then display it in a modal dialog box. I feel like I'm almost there as the file is being recognised when I debug the the modal, but it doesn't display anything:

HTML Button:

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

Knockout.js vm:

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

HTML Modal:

<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);
        }
    })
};

The Javascript picks up the filename ok, but returns no text so the modal popup is just blank. Can anyone please assist regarding where I'm going wrong with this? thanks.

Answer 1

You should use an observable

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();

And in the html you should call it...

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