在敲除js绑定中使用setter函数

Question

这已经是一天的尽头了，我的大脑整夜不眠，但是我正在研究如何动态绑定到HTML元素时如何使用setter。 到目前为止，在我读过的许多示例中，以下Urls似乎对使用带有剔除js绑定的setter的主题最有帮助，但是我仍然不了解这个主意，或者还不知道应该怎么做。

• Knockout.js数据绑定设置器
• 有条件地在功能上绑定一个功能
• 敲除数据绑定在动态生成的元素上
• javascript中的简易双向数据绑定

例如，下面的我的viewmodel（请参阅fiddle ）想保护私有变量，可能稍后会通过添加某种验证代码来实现，但是现在，它只需要获取输入到文本中的参数或文本值即可用户包装。 此类操作的最佳语法到底是什么？

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

Answer 1

如果您尝试通过验证来实现双向绑定，则剔除计算函数应该是最好的方法。 在您的视图模型中，有一个私有变量，并公开了用于绑定的ko.computed函数，然后可以在计算的任一读/写部分中进行验证。

Answer 2

从技术上讲，您可以做到这一点，但这不是使用淘汰赛的方式。 例如，假设我们的视图模型具有一个<select>和一个文本<input>绑定。 使用私有变量来保存实际值，意味着我们需要一个可写的computed观察值来更新它，因为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'];
}

关键是您不需要“保护”您本来可以访问的模型属性，因为如果它们未绑定到视图，则将无法对其进行修改。 此外，如果您现在想使用ko.toJSON函数轻松地将数据序列化为JSON（除非您愿意重写整个解析函数），则在使用var会遇到麻烦。 比较两个视图模型的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"]
} 

查看小提琴