0

我正在使用淘汰赛和微风，现在正在处理 SELECT html 标记。

这是实际的实现：

<select data-bind="value: vehicleId, foreach: $root.vehicles()">
    <option data-bind="text: registration(), value: id()"></option>
</select>

在运行时，它看起来像这样：

在此处输入图像描述

出于测试目的，我重构了这段代码。所以我把foreach选择移开。

这是新的实现：

<select data-bind="value: vehicleId">
    <!-- ko foreach: $root.vehicles() -->
        <option data-bind="text: registration(), value: id()"></option>
    <!-- /ko -->
</select>

在此处输入图像描述

当我测试我的页面时，我注意到微风在第二个实现中没有按预期工作。当我更新数据（在任何输入中）时，微风不再检测到我的更新。通常，当我更新页面上的某些内容时，我知道datacontext.hasChanges()这是真的。然后我显示按钮，如Save, Cancel。现在情况并非如此。如果我回到原来的实现，它会再次起作用。对我来说很奇怪。

任何想法？

谢谢。

编辑

我也看看这个：knockout.js: using a containerless foreach on a <select> failed in Internet Explorer 8

但它似乎也不起作用。

4

1 回答 1

0

您在底部发布的链接绝对正确 - 评论正在从选择框中删除。

问题不在于 Breeze 不起作用 - 而是视图中的 Knockout 绑定正在中断，特别是选择框中的值绑定。这里有两种方法可以完美运行，第一种是您首先发布的方法，并且有效。第二个是使用计算选项绑定，这是我更喜欢的一种方法。

<select data-bind="value: selectedVehicle, options: vehicleOptions, optionsText: 'registration'"></select>

并且在您的视图模型中具有计算的可观察数组

var selectedVehicle = ko.observable();
var vehicleOptions = ko.computed(function () {
    var myArr = [];
    if (!selectedVehicle) { return myArr; }
    return myArr = (refreshVehicles());
});
function refreshVehicles() {
    // Go get vehicles or w/e based on selectedVehicle
    var locVehicles = getVehicles(selectedVehicle());
    return locVehicles;
}

这做了几件事 -

  1. 听起来您正在使用某种级联下拉菜单，并且只要 selectedVehicle 更改，计算的就会被重构。如果不是级联的，那你大概可以跳过这个，直接设置vehicleId或者w/e的值。

  2. 它消除了对额外的无容器绑定的需要，并且还通过将逻辑移动到视图模型中来清理视图。

于 2013-08-04T17:01:09.307 回答