关于kickout.js：knockoutjs：我们可以创建带参数的dependentObservable函数吗？


knockoutjs: can we create a dependentObservable function with a parameter?

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

我可以通过为每个输入设置一个单独的dependentObservable并依次使dependentObservable遵守父项选择来实现这一点。

1
2
3
4
5
6
7
8
9
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 <->字段的业务名称。

当前

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

期望的

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

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

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

html

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

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script id="itemTmpl" type="text/html">
    <li data-bind="text: name, visible: viewModel.shouldThisBeVisible(name)">
</li>



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);
相关讨论

1
2
3
4
5
6
7
var someOtherViewModel = {
   showField: function(fieldName) {
       return ko.dependentObservable(function () {
           return viewModel.selectedType() ? IsFeatureVisible(viewModel, fieldName) : false;
       }, viewModel);
   }
};

您可以创建上面的函数。 该函数返回可观察到的特定字段名称的新依赖项。

现在您可以执行以下操作：

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

如果该代码不起作用，请通知我-也许我错过了一些东西。 然后，我将编辑这篇文章。

相关讨论

进一步推导@Arxisos的想法，我想到了这一点。

1
2
3
4
5
6
7
self.showField = function (fieldName)
{
    return ko.dependentObservable(function ()
    {
        return this.selectedType() ? IsFeatureVisible(this, fieldName) : false;
    }, this)();
};