knockoutjs：我们可以创建一个带参数的dependentObservable 函数吗？答案

【问题标题】：knockoutjs: can we create a dependentObservable function with a parameter?knockoutjs：我们可以创建一个带参数的dependentObservable 函数吗？
【发布时间】：2011-10-06 02:00:41
【问题描述】：

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

我可以通过为每个输入设置一个单独的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 函数绑定吗？重要的是它应该在父级更改时触发

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

当前

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

想要的

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

【问题讨论】：

标签： knockout.js

【解决方案1】：

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

这是一个示例：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>

<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);

【讨论】：

谢谢。它工作得很好。你为我节省了很多时间。
只是一个注释来更新任何出现的人。在最新版本的淘汰赛中，在这种情况下不需要使用template，您可以使用foreach。我见过开发人员使用template，因为他们不明白这一点。启用此功能的模板绑定没有什么特别之处。

【解决方案2】：

var someOtherViewModel = {
   showField: function(fieldName) {
       return ko.dependentObservable(function () {
           return viewModel.selectedType() ? IsFeatureVisible(viewModel, fieldName) : false;
       }, viewModel);
   }
};

你可以像上面那样创建一个函数。该函数为特定字段名称返回一个新的依赖可观察对象。

现在你可以这样做了：

<tr data-bind="visible: someOtherViewModel.showField('Field1')">

如果该代码不起作用，请通知我 - 也许我错过了什么。然后我会编辑这篇文章。

【讨论】：

这很酷，虽然我认为你必须小心使用它。假设您在包含 100 条记录的循环中调用 showField，您实际上是在内存中创建了 100 个dependentObservables。在这种情况下，最好只在 VM 中定义 showFieldX、showFieldY 等，因为它们不在 100 以内，以保持客户端内存占用较低。

【解决方案3】：

进一步从@Arxisos 那里得到这个想法，我想出了这个。

self.showField = function (fieldName)
{
    return ko.dependentObservable(function () 
    {
        return this.selectedType() ? IsFeatureVisible(this, fieldName) : false;
    }, this)();
};

【讨论】：