javascript - 使用 Knockout、Breeze、Durandal 搜索可观察数组

Question

我有以下可观察数组，当 View 被激活时(在 Durandal 上的 activate() 函数处)，它使用 Breeze 从 WebAPI 获取数据

var prices = ko.observableArray();

价格类具有三个属性:id、名称和价格。

然后我有以下数组:

var services = [{
    active: true,
    name: 'Service1',
    price: getPrice('Service1')
}, {
    active: true,
    name: 'Service2',
    price: getPrice('Service2')
}];

getPrice(name) 函数应该做的是获取具有作为参数传递的名称的对象...

我希望能够在 View 上执行以下操作:

<div class="services">
    <ul data-bind="foreach: services">
        <li data-bind="visible: active, text: name + ' ($' + price.price + ')'"></li>
    </ul>
</div>

我在 StackOverflow 上进行了大量搜索，并尝试以多种方式实现此目的，但一直未能成功。我不确定我是否应该使用 ko.utils.arrayFirst()、ko.compulated() 或者我应该做什么..我尝试了很多方法但没有成功。

Answer 1

更新我想我会在评论中添加 MrYellow 的答案，以防有人遇到这个问题。

results = ko.utils.arrayMap(inputs, function(item) { return new ModelFoo(item); });

原创

您不能在 View 中使用该数据，因为它不是可观察的数组，也不是可观察的属性。

var services = ko.observableArray([{
    active: ko.observable(true),
    name: ko.observable('Service1'),
    // Option 1
    price: ko.observable(getPrice('Service1'))
}, {
    active: ko.observable(true),
    name: ko.observable('Service2'),
    // Option 2
    price: ko.computed(getPrice(name()))
}]);

您认为这可行。如果您尝试使用 Breeze 执行此操作，那么您应该已经有一个可观察的对象，除非出现问题，此时我们将需要更多代码。

如果您想迭代价格并让服务这样做 -

var services = ko.observableArray();
ko.utils.arrayForEach(prices(), function (price) {
    services.push(new service(price.active(), price.name(), price.price());
});

在这样的地方有一个模型

function service(active, name, price) {
    var self = this;
    self.active = ko.observable(active);
    self.name = ko.observable(name);
    self.price = ko.computed(getPrice(name));
}

原因是，如果您要创建新的 Knockout 对象(可观察对象)，那么您需要迭代 Breeze 结果并创建它们。使用如图所示的模型类型，这样您就可以提高效率并将所有内容保持在范围内。

另一种选择是，如果prices() 已经拥有除价格属性之外的所有内容，那么只需在返回Breeze 实体时创建一个构造函数方法来计算价格即可。