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函数绑定元素吗？重要的是它应该在父改变时被触发

其他选项是当父改变时，我遍历元素并隐藏/取消隐藏，但这将要求我映射元素id＆lt; - ＆gt;该领域的商业名称。

当前

 <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中，绑定是使用dependentObservables在内部实现的，因此您实际上可以使用普通函数代替绑定中的dependentObservable。绑定将在dependentObservable中运行您的函数，因此任何访问其值的observable都将创建一个依赖项（您的绑定将在更改时再次触发）。

以下是一个示例：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);

Answer 2

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

您可以创建一个类似上面的功能。该函数返回特定字段名称的新依赖observable。

现在你可以做到：

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

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

Answer 3

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

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

knockoutjs：我们可以用参数创建dependentObservable函数吗？

3 个答案: