Question

我需要从knockout生成的html中获取对象的值。我怎样才能做到这一点？我的基本代码结构如下。

如果有更好的方法来实现同样的目标，那我就是全部的耳朵。

在我的JS代码中，我有：

self.myObservable = ko.observable();
self.myObservableArray = ko.observableArray([Obj1, Obj2, Obj3]);
self.someFunction = function () {
  //some ajax calls which gives me an object back with a unique key 
  //so i add this to the observable.
  self.myObservable[uniqueKey] = results;
}

在我的HTML中我有：

<div data-bind="foreach: myObservableArray">
   <span data-bind="name" id="clickme" data-bind="click: function (){toggle('dynamic-id-of-div')}"></span>
   // This is where i need the value from the oject. The key is the 'name' from the Obj in the foreach
   <div id="dynamic-id-of-div">
       $parent.myObservable[key].name???
   </div>
</div>

Answer 1

你的问题不是很清楚（正如另一个答案所说的......），但这是我理解它的方式（如果我错了，请纠正我）：

您希望保留一个可观察对象，以存储某些键的数据。
您希望拥有一个可观察数组，用于存储要为其呈现数据的键。
方法动态地将键/值对添加到第一个observable。
可观察数组可以接收新密钥或删除密钥以更改可见内容。

这是一个示例实现。我添加了一些评论来解释发生了什么。如果我的意图完全出错，请告诉我......

function VM() {
  var self = this;

  // I've initialized this observable with an empty object so we can add keys later
  self.observableStorage = ko.observable({});
  
  // The data type of the items in this array wasn't clear in your question,
  // I've assumed you meant 'references' to objects (string keys)
  self.observableKeys = ko.observableArray(["key1", "key2", "key3"]);

  self.getData = function() {
    // This is what you would receive from the server
    var mockupServerData = {
      "key1": "Data For Key 1"
    };

    // Use `()` to get the old object out of the observable
    var originalStorage = self.observableStorage();
    
    // This creates a new object that has all the old keys, and adds the new one
    var newStorage = Object.assign({}, originalStorage, mockupServerData);

    // Setting the observable with the new object triggers an UI update
    self.observableStorage(newStorage);
  };
};

var vm = new VM();
ko.applyBindings(vm);

vm.getData();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: observableKeys">
  <li>
    <strong data-bind="text: $data"></strong>:
    <span data-bind="text: $parent.observableStorage()[$data] || 'No Data'"></span>
  </li>
</ul>

Answer 2

请记住，除非您使用knockoutjs-es5之类的内容，否则您始终需要通过将其视为函数来设置observable。您不能像使用JS代码示例那样使用简单赋值，而不能自动更新视图。

我认为您可能正在寻找一个可观察的字典，尽管您的示例代码有点过于夸张。在任何情况下，there is no such thing built in为KnockoutJS。因此，您需要使用上述链接中的解决方案，或者您需要重写您的应用程序以使用常规的observableArray键值对，如下所示：

self.myObservablePseudoDictionary = ko.observableArray([]);
self.myObservableArray = ko.observableArray([Obj1, Obj2, Obj3]);
self.someFunction = function () {
  self.myObservablePseudoDictionary.push({ key: uniqueKey, value: results });
}

我无法帮助您在视图中访问它，因为您的伪代码不会告诉我key来自何处。这里有各种各样的选项，根据你的背景，你必须选择/创建一个。这留给了读者的练习:)。

Answer 3

<div data-bind="foreach: myObservableArray">
   <div data-bind="text: name"></div>
</div>

你在foreach里面，所以你现在处于那个物体层面。您还可以使用$ data，即：

<div data-bind="text: $data.name"></div>

但它没有必要。

如果您想知道他们点击了哪个对象：

<div data-bind="foreach: myObservableArray">
   <div data-bind="click: $parent.setItem.bind($data), text: name, "></div>
</div>

将此功能添加到父级：

self.setItem = function (item) {
  // Do what you want with it in here. ie. self.myObservable(item);
  self.myObservable(item);
}

如果您想向用户显示设置了哪一个：

<div data-bind="foreach: myObservableArray">
   <div data-bind="click: $parent.setItem.bind($data), text: name, css: { 'active' : ($parent.myObservable() != null && $parent.myObservable().name() == name())}"></div>
</div>

这会将活动类添加到所选项目div。

从knockoutjs中的key获取对象的值

3 个答案: