knockout.js - knockout : can we create a dependentObservable function with a parameter?

Question

我有多个输入框，我想根据用户的选择隐藏/取消隐藏。

我可以通过为每个输入设置一个单独的dependentObservable 并反过来让dependentObservable 观察父选择来实现这一点。

viewModel.showField1= ko.dependentObservable(function () {
    return viewModel.selectedType() ? IsFeatureVisible(viewModel, "BusinessFieldName1") : false;
}, viewModel
);

viewModel.showField1= ko.dependentObservable(function () {
    return viewModel.selectedType() ? IsFeatureVisible(viewModel, "BusinessFieldName2") : false;
}, viewModel
);

对于每个领域来说，这有点乏味。我可以将元素与可以带参数的dependentObservable 函数绑定(bind)吗？重要的是它应该在父级更改时触发

其他选项是，当父级更改时，我循环遍历元素并隐藏/取消隐藏，但这将需要我映射元素 id <-> 字段的业务名称。

当前

 <tr data-bind="visible: showField1">
 <tr data-bind="visible: showField2">

需要

<tr data-bind="visible: showField('BusinessFieldName1')">
<tr data-bind="visible: showField('BusinessFieldName2')">

Answer 1

在 Knockout 中，绑定(bind)是在内部使用dependentObservables 实现的，因此您实际上可以在绑定(bind)中使用普通函数代替dependentObservable。绑定(bind)将在dependentObservable 内运行您的函数，因此任何访问了其值的可观察对象都将创建一个依赖项(您的绑定(bind)将在它更改时再次触发)。

这是一个示例:http://jsfiddle.net/rniemeyer/2pB9Y/

html

type "one", "two", or "three": <input data-bind="value: text" /> 
<hr />
<ul data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>

js

<script id="itemTmpl" type="text/html">
    <li data-bind="text: name, visible: viewModel.shouldThisBeVisible(name)"></li>
</script>

var viewModel = {
    text: ko.observable("one"),
    items: [{name: "one"}, {name: "two"}, {name: "three"}],
};

viewModel.shouldThisBeVisible = function(name) {
    return this.text() === name;
}.bind(viewModel);

ko.applyBindings(viewModel);