Knockoutjs:如果没有值,则级联写入多个observable?

时间:2014-12-31 15:26:16

标签: javascript knockout.js

我有一张表格,我打算为多人收集信息。每个人的回答很可能相同,但我想让人们能够在保持简单的同时给出定制的回答。所以,我举了一个例子:

http://jsfiddle.net/r29xtLaq/1/

这是一个非常简单的输入形式:

 <p>Person 1: <input data-bind='value: person1' /></p> 
 <p>Person 2: <input data-bind='value: person2' /></p> 

在这个jsfiddle中,我希望它是这样的,当我为person1填充一个值时,该值将在开头自动级联到person2,因为person2的值为空。但是它们都是由单独的可观察对象支持的,因为在为用户预先填写person2之后,她或他可以编辑person2,并且它不会级联回到person1。

3 个答案:

答案 0 :(得分:2)

你有没有尝试过任何事情来实现这个目标呢?这应该是相当简单的,通过在Knockout中实现一个自定义扩展器来订阅值更改并检查其他人是否为空并填充它们。

实施例。扩展器 -

ko.extenders.setOthersOnChange = function(target, others) {
    target.subscribe(function(newValue) {
        ko.utils.arrayForEach(others, function (other) {
            if (!ko.unwrap(other)) {
                other(newValue);
            }
        });
    });
    return target;
};

在您的虚拟机中 -

this.person2 = ko.observable().extend({ setOthersOnChange: [] });
this.person1 = ko.observable().extend({ setOthersOnChange: [this.person2] });

这里的好处是,您可以拥有n个其他从属可观察数量,而无需增加您必须手动创建的订阅数量。我还建议您确保妥善处理它们。

更新小提琴以供参考

http://jsfiddle.net/r29xtLaq/3/

答案 1 :(得分:1)

您可以subscribeperson1进行更改,并仅在后者仍为空时将其值放在person2上:

var self = this;

this.person1.subscribe(function(val)
{
    if (!self.person2())
        self.person2(val);
});

请参见修改后的Fiddle

答案 2 :(得分:1)

如果你想在人与人之间进行级联,你可以这样做。

http://jsfiddle.net/r29xtLaq/1/

// Here's my data model
var ViewModel = function(first, last) {
    var self = this; 
    self.person1 = ko.observable(first);
    self.person2 = ko.observable(last);
    self.person1.subscribe(function(newValue) {   
          if(self.person2() == '')       
          self.person2(newValue);
    });
}  
ko.applyBindings(new ViewModel("", ""));