如何在Aurelia中提交关闭Bootstrap模式

时间:2018-05-24 06:22:57

标签: typescript bootstrap-modal aurelia

我尝试了很多方法,但我找不到解决方案。 这是我的.ts代码

 postData(object) {    
    httpClient.fetch('http://localhost:55265/api/*****', {
      method: "POST",
      body: JSON.stringify(object),
      headers: {
        "Cache-Control": "no-cache"       
      }
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);  
        if (data == true) {
          alert(`Saved!`); 
          // here I want to close my model 
        } else {
          alert(`Error!`); 
        }
      });
  }

这是我的.html文件。这是我添加模式的方法

<div id="AddNews" class="modal fade" role="dialog">
</div>

2 个答案:

答案 0 :(得分:1)

您可以将.modal('hide')用于ID为<。p>的元素

document.getElementById('AddNews').modal('hide');

所以你的最终代码看起来像是

postData(object) {    
  httpClient.fetch('http://localhost:55265/api/*****', {
    method: "POST",
    body: JSON.stringify(object),
    headers: {
      "Cache-Control": "no-cache"       
    }
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);  
    if (data == true) {
      alert(`Saved!`); 
      document.getElementById('AddNews').modal('hide');
    } else {
      alert(`Error!`); 
    }
  });
}

由于您使用Aurelia,您可以尝试添加对dom元素的引用吗?像

这样的东西
<div id="AddNews" class="modal fade" role="dialog" ref="newsRef">
</div>

class ViewModel { 

    //access here
    this.newsRef.modal('hide');

}

答案 1 :(得分:-1)

postData(object) {    
    httpClient.fetch('http://localhost:55265/api/*****', {
      method: "POST",
      body: JSON.stringify(object),
      headers: {
        "Cache-Control": "no-cache"       
      }
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);  
        if (data == true) {
          alert(`Saved!`); 
          $("#AddNews").modal(hide);
        } else {
          alert(`Error!`); 
        }
      });
  }