如何绑定到可观察数组中的某个可观察对象答案

【问题标题】：how to bind to a certain observable inside the observable array如何绑定到可观察数组中的某个可观察对象
【发布时间】：2015-03-05 02:50:25
【问题描述】：

您好，我目前正在为我的问题寻找解决方案。我需要在可观察数组的内容中绑定某个元素的类。我有一个可观察的数组，里面是一个可观察的列表，我需要绑定到满足我条件的可观察

function ViewModel(Name) {
    var self = this;
    self.Observable1 = ko.observableArray([]);
    self.Observable1.push(new myfunction2(name));
    self.Observable1.push(new myfunction2(name + "1"));
}

function myfunction2(Name) {
    var self = this;
    self.Name = ko.observable(Name);
    self.Name2 = ko.observable(Name);
}

ko.applyBindings(new ViewModel("Hello"));

根据我的代码，我有一个包含可观察数组的视图模型，并且在该可观察数组内它有另一个可观察对象，如果它满足我的条件，我需要将我的元素绑定到该元素，我将如何做到这一点？

这是元素

<div data-bind="???????????????" ></div>

如果 Name = "Hello" 的值，我想绑定到数据 Name2 的示例条件

【问题讨论】：

你应该试着做一个工作的例子，甚至可以把它放在像jsfiddle.net这样的东西上

标签： javascript knockout.js

【解决方案1】：

如果我理解您的问题，您可以为您的 ViewModel 类创建一个计算属性，如下所示：

self.SelectedObject = ko.computed(function () {
    return ko.utils.arrayFirst(self.Observable1(), function (element) {
        return element.Name() === "whatever";
    });
});

然后，在 Html 中：

<div data-bind="with: SelectedObject">
    <span data-bind="text: Name2"></span>
</div>

要“吃我自己的垃圾”，这是一个基于您的代码的工作示例。

function ViewModel(name) {
    var self = this;

    self.Observable1 = ko.observableArray([]);
    self.Observable1.push(new myfunction2(name));
    self.Observable1.push(new myfunction2(name + "1"));
    
    self.SelectedObject = ko.computed(function () {
        return ko.utils.arrayFirst(self.Observable1(), function (element) {
            // Try replacing this with "Hello1", and it will select the other element in the array
            return element.Name() === "Hello";
        });
    });
}

function myfunction2(Name) {
    var self = this;

    self.Name = ko.observable(Name);
    self.Name2 = ko.observable(Name);
}

ko.applyBindings(new ViewModel("Hello"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<body>
<div data-bind="with: SelectedObject">
    <span data-bind="text: Name"></span>
</div>
</body>

【讨论】：