通过 Knockout.js 中的字符串从模型中获取可观察性答案

【问题标题】：Getting observable from model by String in Knockout.js通过 Knockout.js 中的字符串从模型中获取可观察性
【发布时间】：2012-06-26 05:54:04
【问题描述】：

我正在 Knockout 中编写自定义绑定处理程序。我想传递一个像：firstName 这样的字符串作为 valueAccessor，然后我想从我的视图模型中获取 observable firstName，但是如何通过 String 获取 observable？

这是我的代码：

ko.bindingHandlers.DefaultOrCustom = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        var value = valueAccessor(), allBindings = allBindingsAccessor();
        // value will equal "firstName" at this phase
    } 
}

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

您可以将 JavaScript 对象作为关联数组访问，使用您的字段名称作为键（例如，object.foo 可以表示为 object['foo']）。然后，当您指向一个可观察对象时，您将其作为函数调用以获取/设置值。

假设您有这样的绑定：

data-bind="DefaultOrCustom: 'firstName'"

你可以像这样访问 observable：

ko.bindingHandlers.DefaultOrCustom = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    var value = valueAccessor(), allBindings = allBindingsAccessor();

    var oldValue = viewModel[value](); // read from the observable
    viewModel[value]('New Value');     // write to the observable 
}

通过检查字段的类型，您可以变得更加灵活。如果它是“函数”，则将其视为可观察对象 - 使用 () 形式，否则将其视为常规字段。

ko.bindingHandlers.DefaultOrCustom = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    var value = valueAccessor(), allBindings = allBindingsAccessor();
    var oldValue;

    if (typeof(viewModel[value]) == 'function') {
      oldValue = viewModel[value]();   // read from the observable
      viewModel[value]('New Value');   // write to the observable
    } else {
      oldValue = viewModel[value];     // read from the field
      viewModel[value] = 'New Value';  // write to the field
    }
}

仅供参考：typeof 实际上不是一个函数，但我经常发现使用此表单可以让我输入的内容更清晰。

【讨论】：

使用 ko.utils.unwrapObservable() 而不是检查它是否是一个函数（如果它是任何类型的对象，它将返回 true） - 除了使它更健壮之外，它还可以简化代码