javascript - KnockoutJS Observable 适当反弹，但调用给出空字符串？

Question

所以我有一个基于名为 toClicked 的 ko.observable 进行更新的部分，请参见下文:

  <div id="longInfoWindow">
     <div id="longInfo_goBack"><span class="fa fa-arrow-left"></span> Go Back</div>
     <div id="location_mainInfo">
        <h1 id="location_title" data-bind="text: toClicked.title">Title</h1>
        <h2 id="location_address" data-bind="text: toClicked.address">Address</h2>
        <h6 class="location_latlng">LAT: <span data-bind="text: toClicked.lat">LATITUDE</span></h6>
        <h6 class="location_latlng">LNG: <span data-bind="text: toClicked.lng">LONGITUDE</span></h6>
        <p id="location_description" data-bind="text: toClicked.content">
           Empty
        </p>
     </div>
  </div>

toClicked 通过 for-each ul 进行数据绑定(bind)，从 observableArray 传入信息位>，所以这个数据是不断变化的 - 这是点击函数在 View 模型中的样子。

var viewModel = {
  // Nav open and close via knockoutjs
  self : this,

  userQuery : ko.observable(''),
  toClicked : ko.observable({}),

  logClick : function(clicked){
    var toClicked = ko.observable({});
    toClicked().title = clicked.title;
    toClicked().lat = clicked.lat;
    toClicked().lng = clicked.lng;
    toClicked().placeID = clicked.placeID;
    toClicked().address = clicked.address;
    toClicked().content = clicked.content;
    return toClicked();
  }
};

// at the end of the document...
ko.applyBindings(viewModel);

出于某种原因，我可以调用任何 toClicked 参数，例如 toClicked.title，并且获得正确的输出。但我无法在代码的 longInfoWindow 位中绑定(bind)任何内容，它会删除带有空字符串的填充文本。我在 Knockout 中是否遗漏了一些东西，导致它无法正确更新？

顺便说一句，我尝试将数据绑定(bind)设置为 viewModel.toClicked.title ，但没有感到高兴。还尝试过$root、$parent。要么返回未定义的结果，要么给出相同的结果。

Answer 1

您需要更改访问 toClicked 的方式。鉴于它是一个可观察对象，它必须使用像 toClicked().property 这样的语法来访问属性。另一个问题是，您应该在设置属性之前将 toClicked 指定为对象。

此外，由于 clicked 是一个数组，因此应该通过索引访问它，例如 clicked[0].title。

请注意函数 logClick 中 self.toClicked.valueHasMutated(); 的使用。它告诉 View 模型可观察变量 toClicked 具有一些可能已更改的不可观察属性。结果 View 模型被更新。您应该避免过度使用它。

var viewModel = function() {
  // Nav open and close via knockoutjs
  var self = this;

  self.test =  ko.observable('text');

  self.userQuery = ko.observable('');
  self.toClicked = ko.observable({});

  self.markers = ko.observableArray([
    { title: 'Eagle River Airport', lat: 45.934099, lng: -89.261834, placeID: 'ChIJdSZITVA2VE0RDqqRxn-Kjgw', content: 'This is the Eagle River Airport. Visit us for fly-ins!' }
  ]);

  self.logClick = function(clicked) {
    // var toClicked = ko.observable({});
    self.toClicked().title = clicked[0].title;
    self.toClicked().lat = clicked[0].lat;
    self.toClicked().lng = clicked[0].lng;
    self.toClicked().placeID = clicked[0].placeID;
    self.toClicked().address = clicked[0].address;
    self.toClicked().content = clicked[0].content;
    self.toClicked.valueHasMutated();
    return self.toClicked();
  };
};

// at the end of the document...
var vm = new viewModel();
ko.applyBindings(vm);
var markers = vm.markers();
vm.logClick(markers);

您的 View 模型也必须略有改变。请注意 toClicked 之后的 () 括号，它们用于访问可观察对象的属性。

<div id="longInfoWindow">
 <div id="longInfo_goBack"><span class="fa fa-arrow-left"></span> Go Back</div>
 <div id="location_mainInfo">
    <h1 id="location_title" data-bind="text: toClicked().title">Title</h1>
    <h2 id="location_address" data-bind="text: toClicked().address">Address</h2>
    <h6 class="location_latlng">LAT: <span data-bind="text: toClicked().lat">LATITUDE</span></h6>
    <h6 class="location_latlng">LNG: <span data-bind="text: toClicked().lng">LONGITUDE</span></h6>
    <p id="location_description" data-bind="text: toClicked().content">
       Empty
    </p>
 </div>

我还建议不要直接在 logClick 中访问 toClicked，而是使用 self.toClicked 之类的内容来避免歧义。请参阅this .

这是工作 fiddle :https://jsfiddle.net/Nisarg0/hx0q6tt6/13/