knockout.js - template - knockoutjs: ¿podemos crear una función dependienteObservable con un parámetro?

knockoutjs $root

Question

Tengo varios cuadros de entrada que quiero ocultar / mostrar en función de una selección del usuario.

Puedo lograr esto teniendo un dependiente separado observable para cada entrada y, a su vez, hacer que el dependiente observable observe la selección primaria.

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

esto es algo tedioso de hacer para cada campo. ¿Puedo vincular los elementos con una función dependienteObservable que puede tomar un parámetro? Lo importante es que debe activarse cuando el padre cambia

Otra opción es que cuando el padre cambia, recorro los elementos y oculto / destapo, pero eso me obligará a mapear el elemento id <-> nombre comercial del campo.

Corriente

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

Deseado

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

Answer 1

En Knockout, los enlaces se implementan internamente usando dependentObservables, por lo que puede usar una función simple en lugar de dependienteDebservable en sus enlaces. El enlace ejecutará su función dentro de un dependienteDebservable, por lo que cualquier observable que tenga acceso a su valor creará una dependencia (su enlace se activará de nuevo cuando cambie).

Aquí hay una muestra: 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

Tomando la idea de @Arxisos aún más, se me ocurrió esto.

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

Answer 3

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

Puede crear una función como la de arriba. La función devuelve un nuevo dependiente observable para el nombre de campo específico.

Ahora puedes hacer:

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

Informarme si ese código no funciona, tal vez me perdí algo. Luego editaré esta publicación.