下面是我的可观察代码:
var suggestions =
Rx.Observable.fromEvent(textInput, 'keyup')
.pluck('target','value')
.filter( (text) => {
text = text.trim();
if (!text.length) // empty input field
{
this.username_validation_display("empty");
}
else if (!/^\w{1,20}$/.test(text))
{
this.username_validation_display("invalid");
return false;
}
return text.length > 0;
})
.debounceTime(300)
.distinctUntilChanged()
.switchMap(term => {
return $.ajax({
type: "post",
url: "src/php/search.php",
data: {
username: term,
type: "username"
}
}).promise();
}
);
suggestions.subscribe(
(r) =>
{
let j = JSON.parse(r);
if (j.length)
{
this.username_validation_display("taken");
}
else
{
this.username_validation_display("valid");
}
},
function (e)
{
console.log(e);
}
);
我遇到的问题是,当输入为空时,我有另一段代码,它基本上返回一个“error: empty input”,但它被返回的observable所覆盖。所以我想知道,如果text.length
为0,是否有一种方法可以忽略所有可观察到的内容,但当文本长度不为0时,也可以重新订阅。
我想过unsubscribe
,但不知道该把它放在哪里去尝试。
发布于 2017-08-25 11:58:06
也许这能行得通?其想法是将空输入合并到切换映射中,以便在这种情况下关闭当前可观测对象,即也就是丢弃。
var suggestions =
Rx.Observable.fromEvent(textInput, 'keyup')
.pluck('target','value')
.filter( (text) => {
text = text.trim();
if (!text.length) // empty input field
{
this.username_validation_display("empty");
}
else if (!/^\w{1,20}$/.test(text))
{
this.username_validation_display("invalid");
return false;
}
})
.debounceTime(300)
.distinctUntilChanged()
.switchMap(text=> {
if (text.length > 0) {
return $.ajax({
type: "post",
url: "src/php/search.php",
data: {
username: text,
type: "username"
}
}).promise()}
return Rx.Observable.empty();
}
);
发布于 2017-08-25 22:27:01
您可以使用原始值流作为ajax调用的通知程序,以中止其值。这将为您提供足够的控制,以便在字段为空时添加显示消息的附加处理,而不会被以前的ajax结果覆盖。
const inputValues = Rx.Observable.fromEvent(document.getElementById("inputField"), "keyup")
.pluck("target","value")
.distinctUntilChanged()
.do(val => console.log('new value: ' + val));
inputValues
.filter(val => val.length > 0)
.switchMap(text => doAjaxCall(text)
.takeUntil(inputValues)
)
.subscribe(val => console.log('received a value: ' + val));
function doAjaxCall(inputValue) {
return Rx.Observable.of(inputValue)
.do(val => console.log('ajax call starting for: ' + val))
.delay(1000)
.do(val => console.log('ajax call returned for: ' + val));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.2/Rx.js"></script>
<label>input field<input type="text" id="inputField" /></label>
https://stackoverflow.com/questions/45809900
复制相似问题