2017-05-28 106 views
0

我想綁定一個簡單的kendo窗口打開和關閉我的應用程序中的功能。kendo窗口關閉重新加載頁面有時(不一致)

以下是HTML模板:

<div id="edit-user-window"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-10"> 
       <form class="form-horizontal"> 
        <div class="form-group"> 
         <label for="firstname">First Name</label> 
         <input type="text" name="firstname" class="form-control" data-bind="value: editUser.FirstName"> 
        </div> 
        <div class="form-group"> 
         <label for="email">Email</label> 
         <input type="email" name="email" class="form-control" data-bind="value: editUser.Email" required> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
        <button class="btn btn-default" data-bind="click: cancelEdit">Cancel</button> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

數據綁定以這種方式

function Model(app, popUp) { 
    var ko = kendo.observable({ 
     self: this, 
     dataSrc: null, 
     editUser: {}, 
     init: function() { 
      // Set up data source 
      self.dataSrc = new kendo.data.DataSource({ 
       data: [], 
       transport: {read: {url:, dataType:}}, 
       schema: { 
        model: { Name: "FirstName", Email: "Email"} 
       } 
      }); 

      // Define the user table 
      $("#userGrid").kendoGrid({ 
       dataSource: self.dataSrc, 
       columns: [ 
        { field: 'FirstName', title: 'Name' }, 
        { field: 'Email', title: 'Email' }, 
        { 
         field: 'Operations', 
         width: "152px;", 
         command: [ 
          { 
           name: 'edit', 
           template:"<a class='k-grid-edit' href='#' style='border-right:1px solid black;padding:5px;'>Edit</a>", 
           click: function (e) { 
            e.preventDefault(); 
            $("#edit-user-window").data("kendoWindow").center().open(); 
            var tr = $(e.target).closest("tr"); 
            self.set("editUser",this.dataItem(tr)); 
           } 
          } 
         ] 
        } 
       ] 
      }); 

      $("#edit-user-window").kendoWindow({ 
       width: "80%", 
       height: "80%", 
       title: "Edit User", 
       visible: false, 
       actions: [ 
        "Close" 
       ] 
      }); 
     }, 
     cancelEdit: function (e) { 
      $("#edit-user-window").data("kendoWindow").center().close(); 
     }, 
    }); 

    return ko; 
} 

做當我關閉使用按鈕點擊cancelEdit功能的窗口,窗口有時正常關閉有時會刷新整個頁面。沒有有用的日誌消息來調試該問題。由於這將是一個單頁的應用程序,重新加載是不可容忍的。

潛在的問題可能與有編輯操作的kendogrid中的每一行有關。 PS:我是劍道新手,所以方法可能有缺陷。

回答

2

如果您將按鈕元素放入窗體中,則默認情況下會在您單擊它時發送此窗體。爲了防止它添加type =「button」屬性到你的取消按鈕。

<button class="btn btn-default" type="button" data-bind="click: cancelEdit">Cancel</button> 
+0

是否與在preventEdit()函數中放入preventDefault()效果相同? – stWrong

+0

Technicly preventDefaults作品:http://jsfiddle.net/Q8KVC/2486/我檢查了我的IE和Chrome。但我無法保證它可以在所有瀏覽器和所有版本上運行。有人在這個線程確切的這個問題:https://stackoverflow.com/questions/21837155/preventdefault-not-work-in-submit-button –

相關問題