在knockoutjs绑定中使用setters函数

Using setters functions in knockoutjs bindings

本文关键字：setters 函数 knockoutjs 绑定      更新时间：2023-10-18

这是一天的结束，我的大脑整夜都在思考，但我正在学习如何在动态绑定到Html元素时使用setter。到目前为止，在我读到的许多例子中，下面的Url似乎对使用具有knockoutjs绑定的setter主题最有帮助，但我仍然不知道该如何做到这一点。

  • knockoutjs数据绑定设置器
  • 条件绑定函数
  • 动态生成元素上的敲除数据绑定
  • javascript中简单的双向数据绑定

例如，我下面的视图模型（请参阅fiddle）希望保护私有变量，稍后可能会添加某种验证代码。然而，现在，它只需要获取用户在文本框中输入的参数或文本值。这种操作的最佳语法究竟是什么？

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/>

如果您试图在验证的同时实现双向绑定，那么敲除计算函数应该是最好的方法。在您的视图模型中，有一个私有变量，并为绑定公开ko.computed函数，然后在计算的读/写部分中，您可以进行验证。

从技术上讲，你可以这样做，但这不是Knockout的使用方式。例如，假设我们的视图模型有一个<select>和一个文本<input>绑定。使用私有变量来保存实际值意味着我们需要一个可写的computed observable来更新它，因为Knockout只将属性绑定到视图，而不是私有变量。

function appWithPrivateVars() {
    var selectedItem = ko.observable('Option 3'), //our private vars
        textVal =  ko.observable('Haha');
    this.selected = ko.computed({
        read: function() { return selectedItem(); },
        write: function(value) { /* add validation code here */  selectedItem(value); }
    });
    this.textVal =  ko.computed({
        read: function() { return textVal(); },
        write: function(value) { /* add validation code here */ textVal(value); }
    });
    this.listItems = ['Option 1','Option 2','Option 3'];
    this.get = function() { return selectedItem(); }; //getter
}

现在，在不关心私有变量的情况下，与同一视图模型所需的代码进行比较（还要注意，您不需要显式的getter/setter）：

function appWithProperties() {
    var self = this;
    this.textVal = ko.observable('Haha');
    // example of computed
    this.textValInput = ko.computed({
        read: function() { return self.textVal(); },
        write: function(value) { /* add validation code here */ textVal(value); }
    this.selected = ko.observable('Option 3');
    this.listItems = ['Option 1','Option 2','Option 3'];
}

问题是，你不需要"保护"你本来可以访问的模型属性，因为如果它们没有绑定到视图，就无法修改。此外，如果您使用var，那么您将遇到麻烦。此时，您希望使用ko.toJSON函数轻松地将数据序列化为JSON（除非您愿意重写整个解析函数）。比较两种视图模型的ko.toJSON输出：

appWithPrivateVars 的样本数据

// no private vars included, eg. 'selectedItem'
{"selected":"Option 1", // computed prop; not what we need
 "textVal":"Haha",
 "listItems":["Option 1","Option 2","Option 3"]}

查看映射中如何不包括"实际"值（这是合乎逻辑的，因为ko.toJSON无法访问这些值）。现在查看appWithProperties:的JSON输出

{"textVal":"Haha", // actual value
 "textValInput: "Haha", // value filter
 "selected":"Option 1",
 "listItems":["Option 1","Option 2","Option 3"]
}

查看小提琴

相关文章：