Javascript 如何在knockout.js中创建转换器？

我在一个使用JavaScript库的项目中工作。我有一个名为BaseViewModel的视图模型，有一个名为isAuthenticated的可观察属性

isAuthenticated属性由布尔类型填充，对于经过身份验证的人员，为true；对于未经身份验证的人员，为false。下面是一个简单的例子：

var BasicViewModel = {
   this.isAuthenticated = ko.observable();
}

在我的项目中，此属性绑定在span元素上，如下代码所示：

<span id="parking" data-bind="text: BasicViewModel.isAuthenticated"></span>

现在，我将在span元素中显示一个文本，如下所示：

• 认证
• 未经认证

我知道我可以创建一个计算属性，但执行此操作是否没有WPF转换器？例如：

<span id="parking" data-bind="text: BasicViewModel.isAuthenticated, Converter=myConverter"></span>

---

转换器没有直接的类似解决方案。做类似的事情有多种方法

自定义绑定处理程序

最接近转换器工作方式的是创建自定义绑定。使用WPF，您将同时拥有一个转换器和一个值绑定，在自定义绑定处理程序中，您可以同时执行这两个操作

默认的

text

绑定可以被视为文本值的绑定，该绑定将文本值呈现为纯文本。您可以重用其逻辑并创建一个绑定处理程序，以不同的方式呈现布尔可观测值：

ko.bindingHandlers.textBool = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var field = ko.utils.unwrapObservable(valueAccessor());
        field = !!field ? "So True!" : "False!";
        ko.bindingHandlers.text.update(element, function() { return field; });
    }
};

然后像这样使用它：

<span data-bind="textBool: BasicViewModel.isAutenticated"></span>

function ViewModel() {
  var self = this;
  self.isAuthenticated = createBoolComputed(/* parameters optional */);
}

您甚至可以将其分解为要使用的效用函数，而不是

ko.computed

，例如：

function createBoolComputed(trueText, falseText) {
  var _isAuthenticated = ko.observable(false);
  trueText = trueText || "True!";
  falseText = falseText || "False!";

  return ko.computed({
    read: function() { return _isAuthenticated() ? "True!" : "False..."; },
    write: function(val) { _isAuthenticated(val); }
  );
}

然后像这样使用它：

<span data-bind="textBool: BasicViewModel.isAutenticated"></span>

function ViewModel() {
  var self = this;
  self.isAuthenticated = createBoolComputed(/* parameters optional */);
}

自定义模板

---

如果您进一步偏离了WPF转换器的类比，您也可以为此使用模板。如果您想为不同的值呈现特殊的DOM，这将特别有用

我认为最简单的方法就是编写一个转换函数并在绑定中调用它

函数ViewModel（）{
var self=这个；
self.isAuthenticated=ko.可观察（假）；
self.myConverter=函数（bool）{
var值=ko.展开（布尔）；
返回值？'Authenticated'：'notauthenticated'；
};
setTimeout（函数（）{
自我验证（真实）
}, 1500);
}
应用绑定（新的ViewModel（））
我只需要使用一个普通的只读计算程序，从
中读取已验证的内容，并返回要显示的文本。其他任何事情似乎都是多余的


函数ViewModel（）{
var self=这个；
self.isAuthenticated=ko.可观察（假）；
self.isAuthenticatedText=ko.computed（函数（）{
返回self.isAuthenticated（）？“已验证”：“未验证”
});
setTimeout（函数（）{
自我验证（真）；
}, 1500);
}
应用绑定（新的ViewModel（））
比计算变量更通用的解决方案是自定义绑定