javascript - Knockout 组件 View 在其 ViewModel 可观察更改时不更新

Question

我有一个组件设置来使用 AMD 获取 html 模板和 View 模型代码。一切正常。该组件在它应该加载的时候加载，并且在传递给它的参数下表现良好。问题是我在 viewModel 中定义了一个 observable，它的值显示在模板 View 中，但是当 observable 的值改变时， View 上的文本不会改变。谁能解释这里发生了什么？我试图绑定(bind)的文本是 modalTitle。当模态加载时，它的标题是“TEMP”，但如果我转到控制台并键入“window.modalTitle()”，我会得到“CREATE REPORT SCHEDULE”。这就像 View 正在获取可观察对象的第一个值，然后忽略它。无论如何我可以强制它寻找更新吗？

ViewModel: (schedules.component.js)

  define(['knockout'], function (ko) {
  console.log('schedules hit');
  loadCss('schedules');

  function SchedulesViewModel(params) {
    this.scheduledItems = params.scheduledItems;
    this.itemName = params.itemName;
    this.modalTitle = ko.observable("TEMP");
    window.modalTitle = this.modalTitle;
  }

  SchedulesViewModel.prototype.initiateAddScheduledItem = function () {
    this.modalTitle("CREATE " + this.itemName + " SCHEDULE");
    $('#schedulesModal').modal('show');
  };

  SchedulesViewModel.prototype.removeSelectedScheduledItem = function () {
    this.chosenValue('dislike');
  };

  window.ReportsApp.SchedulesViewModel = SchedulesViewModel;

  return SchedulesViewModel;
});

查看模板

<div id="schedulesModal" class="modal fade lcmsModal" tabindex="-1" role="dialog">
  <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>-->
        <img src="/Content/images/modalASLogo.png" style="float: right;" />
        <h4 class="modal-title" data-bind="text: modalTitle()">Test Title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body ...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
        <button type="button" class="btn btn-primary">SAVE</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /Bootstrap Modal -->

Answer 1

它不会改变，因为 this.itemName 还没有被定义为可观察的。最好定义一个计算的可观察对象，它会在任何可观察对象发生变化时自动更新。
除了使用 prototype 来添加方法，您还可以使用 knockout 函数来代替它。示例:https://jsfiddle.net/kyr6w2x3/34/

 function SchedulesViewModel(params) {
    var self = this ;
    self.scheduledItems = ko.observable(params.scheduledItems);
    self.itemName = ko.observable(params.itemName);
    self.modalTitle = ko.observable("TEMP");
    self.chosenValue= ko.observable();

   self.modalTitle = ko.computed(function() {
        return "CREATE " + self.itemName() + " SCHEDULE" ;
    }, self);

    // you can change below to show your modal whenever you want
    $('#schedulesModal').modal('show');

    self.removeSelectedScheduledItem = function (){
        self.chosenValue('dislike');
    }
  }


ko.applyBindings(new SchedulesViewModel({scheduledItems:"scheduledItems" ,itemName : "itemName" }));

更新:是的，您可以拥有多个 View 模型，或者更好的说法是嵌套 View 模型。查看新示例，了解如何在模型之间进行通信。 https://jsfiddle.net/kyr6w2x3/35/