backbone-froms多視圖提交表格

我有一個主視圖App.MainView（表視圖），一個App.TaskView（行視圖），並使用骨幹形式來添加和編輯記錄。這裏是我的代碼：backbone-froms多視圖提交表格

App.MainView = Backbone.View.extend({ 
      template: $("#home-template").html(), 
      initialize: function() { 
       _.bindAll(this, 'render'); 
       this.listenTo(tasks, 'add change', this.addOne); 
       this.subViews = []; 


      }, 
addOne: function(model) { 


       var view = new App.TaskView({model: model}); 
       this.$('tbody').append(view.render().el); 
      }, 
render: function() { 

       var template = _.template(this.template); 
       this.$el.append(template); 
       //this.$el.find("#filter").append(this.createSelect()); 
       var self = this; 


       this.collection.fetch({ 
        wait: true, 
        success: function(model, response) { 


         var TasksLen = model.length; 

         for (var i = 0; i < TasksLen; i++) { 

          var taskView = new App.TaskView({ 
           model: model.models[i] 
          }); 


          //self.subViews.push(taskView); 

          $('#record-list-table', this.el).append(taskView.render().el); 

         } 
        } 

       }); 
    }, 

Now my TaskView: 

App.TaskView = Backbone.View.extend({ 
      tagName: 'tr', 
      template: _.template($('#record-template').html()), 
initialize: function() { 
       var self = this; 

      }, 
events: { 

       "click .edit": "editrecord", 



      }, 
render: function() { 

       this.$el.html(this.template(this.model.toJSON())) 

       return this; 



      }, 
editrecord: function() { 

       form.setValue(this.model.toJSON()); 
} 

and my Form and submit button 

var form = new Backbone.Form({ 
      model: task 
     }); 

     window.form = form; 
     $('#form').html(form.render().el); 

     $('#submit-btn').click(function() { 

      var data = form.getValue(); 
      form.commit(); 
      task.save(data, {wait: true, 
        success: function(task, response) { 
         tasks.add(task); 

        } 


       }); 
Templates: 
<script type="text/template" id="home-template"> 
<table id="recordtable"> 
<input type='reset' id="reset-btn" onclick="reset()" class="add-new" value='' name='reset' /></table></script> 


<script type="text/template" id="record-template"> 

    <td id="edit-name" class="edit"> <%- name %></td> 
    <td class="edit date" class="edit"> <%- due_date %></td> 

</script>

我有兩個問題：

在模型的變化，它增加了一個模型（但是它在數據庫中，但在前端PUT請求和更新骨幹增添了表中的新行而不是更新前一行）。但頁面刷新後，它顯示正確的數據。看起來像改變事件的一些問題。
我想要創建直接路由到任務，即任務/ ID，並希望在表中突出顯示該任務並在窗體中進行編輯。現在我可以在窗體上單擊編輯任何模型，但我也想要直接路由。

來源

2014-01-09 user3178935

我想現在我發現你的代碼的問題。你在做

tasks.add(task);

成功的模型保存方法。但我認爲你需要重新完成任務。 1.您可以在任務視圖中綁定更改事件，以便使用更新後的值呈現任務。 2.您可以在taskview添加這樣的函數

refresh: function(){ 
    this.render(); 
}

，你可以調用這個函數後model.save成功找到。

來源

2014-01-09 19:53:47

我已經試過這樣做，但看起來像它要addOne函數而不是呈現在變化上。 – user3178935

我認爲這是發生的。 this.listenTo（tasks，'add change'，this.addOne）; –

請糾正我，如果我錯了，所以我已經添加保存suceess成功後：function（task，response）var taskView = new App.TaskView（）; taskView.refresh（）; }和taskview具有刷新功能refresh：function（）{ this.render（）; }，我收到錯誤無法調用未定義的方法'toJSON'（this.model未定義）。我如何通過模型。 – user3178935

backbone-froms多視圖提交表格

回答

相關問題