根据ajax响应更改单选按钮值

时间:2016-10-28 09:07:42

标签: javascript html radio-button promise jsviews

我用JSViews绑定一个带有默认对象的对象数组。我用单选按钮显示默认值。当我想将另一个对象作为默认对象时,我需要进行ajax调用并仅在调用成功时使用预定义状态将其更改为默认对象。我正在使用promises for ajax requests.I知道我是否返回false功能,单选按钮状态不会改变。我试过这样的东西,但它不起作用。我假设因为我返回了诺言,它在返回时不会解析为真或假。如何实现?

<input type="radio" name="default" data-link="checked{:isDefaultObj} {on ~setAsDefault}">

JS

setAsDefault:function(){
  return service.setAsDefaultObj('123').then(function(response){
        return response; //response is either true or false;
    },function(response){
       return response;
   });
 }

1 个答案:

答案 0 :(得分:1)

对于~setAsDefault - 您可以返回false,因此默认点击操作会检查该输入是否被跳过。

然后我建议将数据链接属性与单选按钮组关联起来,这样您可以在承诺返回成功/错误后显着设置新的/原始属性。

以下是数据链接到selectedCar的示例,其中延迟设置了适当的值。

使用单向数据链接:

<label><input name="cars" type="radio" value="none" data-link="{:selectedCar} {on getAjax 'none'}"/>
  None</label><br/>
<label><input name="cars" type="radio" value="vlv" data-link="{:selectedCar} {on getAjax 'vlv'}"/>
  Volvo</label><br/>
<label><input name="cars" type="radio" value="frd" data-link="{:selectedCar} {on getAjax 'frd'}"/>
  Ford</label><br/><br/>

或使用您的checked{...}方法

<label><input name="cars2" type="radio" value="none" data-link="checked{:selectedCar==='none'} {on getAjax 'none'}"/>
  None</label><br/>
<label><input name="cars2" type="radio" value="vlv" data-link="checked{:selectedCar==='vlv'}  {on getAjax 'vlv'}"/>
  Volvo</label><br/>
<label><input name="cars2" type="radio" value="frd" data-link="checked{:selectedCar==='frd'}  {on getAjax 'frd'}"/>
  Ford</label><br/><br/>

在每种情况下,使用以下代码方法:

var data = {
  selectedCar: "frd",
  getAjax: function(val) {
    var sel = data.selectedCar;
    $.ajax({
      type: 'GET',
      url: "../TEST" + val + ".html",
      timeout: 5000,
      success: function(){
        $.observable(data).setProperty("selectedCar", val);
      },
      error: function(xhr, textStatus, errorThrown){
        $.observable(data).setProperty("selectedCar", val);
        $.observable(data).setProperty("selectedCar", sel);
      }
    });
    return false;
  }
};