knockoutjs:我们可以用参数创建dependentObservable函数吗?

Pin*_*hah 23 knockout.js

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

我可以通过为每个输入分别使用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
);
Run Code Online (Sandbox Code Playgroud)

对于每个领域来说,这都是一种乏味的做法.我可以使用可以获取参数的dependentObservable函数绑定元素吗?重要的是它应该在父级更改时触发

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

当前

 <tr data-bind="visible: showField1">
 <tr data-bind="visible: showField2">
Run Code Online (Sandbox Code Playgroud)

期望

<tr data-bind="visible: showField('BusinessFieldName1')">
<tr data-bind="visible: showField('BusinessFieldName2')">
Run Code Online (Sandbox Code Playgroud)

RP *_*yer 31

在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>
Run Code Online (Sandbox Code Playgroud)

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);
Run Code Online (Sandbox Code Playgroud)

  • 只是一个更新任何人的说明.在更新的淘汰版本中,在这种情况下不需要使用`template`,你可以使用`foreach`.我见过开发人员使用`template`因为他们不明白这一点.启用此功能的模板绑定没有什么特别之处. (2认同)

Arx*_*sos 12

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

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

现在你可以这样做:

<tr data-bind="visible: someOtherViewModel.showField('Field1')">
Run Code Online (Sandbox Code Playgroud)

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