- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一系列可观察到的服务,这些服务可能由一家公司提供(即销售、服务、咨询)。这些服务中的每一项都可能由该公司在零个或多个美国州执行,并且每个州都有一个可选的认证编号。因此,服务有一个可观察的位置数组,位置是状态和证书编号的组合。
function Service(name) {
var self = this;
self.Name = ko.observable(name);
self.Locations = ko.observableArray();
}
function Location(state) {
var self = this;
self.State = ko.observable(state);
self.CertNum = ko.observable();
}
在用户界面中,我想显示美国所有州的单个列表。用户将勾选公司经营所在的每个州旁边的复选框,从而制作州的“主列表”。反过来,这个主列表会驱动出现在每个可能服务下的选择。
例如,用户在主列表中勾选“Alabama”和“Arizona”。然后,UI 为每个服务呈现一个单独的位置,作为复选框和文本框的组合。这是主视图模型:
function viewModel() {
var self = this;
self.AllStates = [
{ name: "Alabama", abbrev: "AL" },
{ name: "Alaska", abbrev: "AK" },
{ name: "Arizona", abbrev: "AZ" },
{ name: "Arkansas", abbrev: "AR" }
];
self.BusinessStates = ko.observableArray();
self.AllSelectedStates = ko.computed( function() {
return ko.utils.arrayFilter( self.AllStates, function(item) {
return self.BusinessStates.indexOf(item.abbrev) >= 0;
});
});
self.Services = ko.observableArray([
new Service("Sales"),
new Service("Service"),
new Service("Consulting")
]);
}
一个简单的 View 看起来像:
<h2>Master List</h2>
<ul data-bind="foreach: AllStates">
<li>
<label><input type="checkbox" data-bind="value: abbrev, checked: $root.BusinessStates"/> <span data-bind="text: name"></span></label></li>
</ul>
<h2>Services</h2>
<div class="service" data-bind="foreach: Services">
<h3 data-bind="text: Name"></h3>
<ul data-bind="foreach: $root.AllSelectedStates">
<li>
<label>
<input type="checkbox" data-bind="value: abbrev, checked: $parent.Locations" />
<span data-bind="text: name"></span>
</label>
<input type="text" placeholder="Cert. Number" data-bind="value: ??" />
</li>
</ul>
</div>
该 View 至少让我进入服务的 Locations 数组的状态,但我不知道如何绑定(bind) CertNum 属性。
假设用户在主列表中选择了阿拉巴马州和亚利桑那州。现在,对于“销售”服务,用户勾选“亚利桑那”并输入认证编号“98765”。在“咨询”服务下,用户勾选“阿拉巴马”并且不输入证书编号。理想情况下,我希望生成的 JSON 片段看起来像:
"Services": [
{
"Name": "Sales",
"Locations": [
{
"State": { "name": "Arizona", "abbrev": "AZ" },
"CertNum": "98765"
}
]
},
{
"Name": "Service",
"Locations": []
},
{
"Name": "Consulting",
"Locations": [
{
"State": { "name": "Alabama", "abbrev": "AL" },
"CertNum": null
}
]
}
]
我可以呈现和绑定(bind)美国各州的“主列表”。我可以遍历服务并呈现一个 UI,该 UI 为每个可用的服务位置提供控件(即状态的复选框,证书编号的文本框)。我无法绑定(bind)服务位置控件以控制适当 Locations 数组中位置的成员资格,并同时影响认证编号的值。
我所做的最接近的尝试是相当复杂和老套的,我使用的是 knockout-postBox plugin将 viewModel.AllSelectedStates 属性链接到每个服务模型上的类似属性,然后将新位置推送到每个 Service.Locations 数组中。它几乎 可以工作,除了它会在主列表中选中或取消选中某个状态时消除对服务的更改。此外,我必须将每个可用位置推送到每个服务的 Locations 数组中,并依靠位置上的 IsSelected bool 标志来确定它是否已被选中(我宁愿将位置只是放在被选中的数组)。
您可以在这个 JSFiddle 中看到尝试:http://jsfiddle.net/cbono/PU6Sq/23/
它的好处在于它展示了 UI 应该如何表现。但我认为如果没有 postBox 插件这是可能的,我只是没有以正确的方式看待问题来找出答案。我花了几天时间解决这个问题,但无法想出 100% 有效的解决方案。
最佳答案
使用 visible
绑定(bind)比管理集合事件更容易。
<li data-bind="visible: State().IsSelected">
http://jsfiddle.net/MizardX/XTkpb/
如果你真的需要处理它们,你可以在 Services
对象中缓存 StateAndCert
对象:
var self = this,
cache = {};
self.Locations = ko.computed(function () {
return ko.utils.arrayMap(states(), function (item) {
var key = item.Abbrev();
if (cache[key] === undefined) {
cache[key] = new StateAndCert(item);
}
return cache[key];
});
});
http://jsfiddle.net/MizardX/HMAtE/
要在 JSON 呈现中隐藏某些属性,您可以将它们填充到 function(){}
属性中:
self.Meta = function(){};
self.Meta.IsSelected = ko.observable(false);
关于knockout.js - knockout : Complex binding with observable arrays and checkboxes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13925909/
一段时间后,我阅读了有关 RxJava concat 的内容,并决定测试一下我的理解力。但是我遇到了一些我不太理解的行为。 问题是,当我连接两个可观察对象时,根据我将它们传递给 Observable.
我正在使用来自数据库服务的数据实现自动完成: @Injectable() export class SchoolService { constructor(private db: AngularF
我正在尝试使用 RxJS 创建一个可观察的对象,它可以执行如图所示的操作。 获取一个值并等待一段固定的时间才能获得 下一个。 下一个将是该周期内发出的最后一个值 等等,跳过其余部分。 如果等待时间间隔
我有一个可观察对象和另一个提供的可观察对象改变 key 。我想构建一个在之间切换的可观察对象基于该键的对象中的可观察值。 示例: // Choose randomly between "up" or
我使用 protobuffers 在我的前端和我的 Dart 服务器之间进行通信。 那些对象没有实现 Observable . 我的 Dart 聚合物对象看起来像: @CustomTag('user-
在 java swing 项目中,我有一个模型类,它保存某个 JPanel 的状态。我需要使这些数据可供 View 使用。我认为有两种选择。有一个扩展 Observable 的类并将模型作为实例变量。
我想找到一种方法来检测观察者是否已完成使用我使用 Rx.Observable.create 创建的自定义可观察对象,以便自定义可观察对象可以结束它并正确地进行一些清理。 因此,我创建了一些测试代码,如
我正在尝试查询数据库。迭代结果列表,并为每一项再执行一个请求。在 rxjs 构建结束时,我有 Observable[]> 。但我需要Observable 。如何做到这一点? this.caseServ
我希望我的 api 上有一个方法返回 Observable> 但我希望该方法中的代码知道所有包含的 Observables 是否已完成,以便它可以关闭某些内容。最好的方法是什么? 更明确地说,我希望完
我有两个方法返回 Observable> firstAPI.getFirstInfo("1", "2"); secondApi.getSecondInfo(resultFirstObservable,
我有一个 Observable返回单个 Cursor实例(Observable)。我正在尝试利用 ContentObservable.fromCursor获取 onNext 中每个游标的行回调。 我想
我有两种返回 Observable 的方法: Observable firstObservable(); Observable secondObservable(String value); 对于第一
我正在尝试创建一个将用户数据作为 Observable 的函数,并使用来自第一个 observable 的数据从查询中添加/合并数据,然后将所有这些数据作为一个 observable 返回,我可以这样
我有一个 spec-compliant ECMAScript Observable ,具体来自 wonka library .我正在尝试将这种类型的 observable 转换为 rxjs 6 obs
为了简化问题,我在这里使用了数字和字符串。代码: const numbers$:Observable = of([1,2,3]); const strings: string[] = ["a","b"
对于我的 Android 应用程序,我需要一个 Observable 来聚合来自 7 个不同搜索的结果并作为一个集合发出。 对于最终发射,我选择了 ListMultimap其中 Content是搜索结
我正在使用改造 2.0.0-beta2 并且调试构建工作正常,但我在使用 Proguard 发布构建时遇到以下错误。 这是更新后的 logcat 错误。 11-17 18:23:22.751 1627
observer.throw(err) 和 observer.error(err) 有什么区别? 我正在使用 RxJS 版本“5.0.0-beta.12” var innerObservable =
我们有一种情况,对服务的方法调用返回一个 IObservable但我们的客户期望 IObservable .将 T1 转换为 T2 很简单。 Rx 中有什么允许这样做的吗? (即链接观察者) 我知道我
我陷入了如何将以下可观察类型转换/转换为我的目标类型的困境: 我有可观察的类型: Observable>> 我想将其转换为: Observable> 所以当我订阅它时,它会发出 List不是Obser
我是一名优秀的程序员,十分优秀!