如何在基於Backbone.js的模板中向元素添加數據

Question

我手上有一個項目，它使用了ribs.js（我從未使用過）。 盡管我已經研究了代碼，並且在Backbone上閱讀了很多東西。 現在，我有一個問題，在AJAX請求成功后，應該如何編輯元素的內容？ 此ajax請求是通過單擊按鈕觸發的，該按鈕綁定到單擊事件。 全部嵌套在骨干網中。

模板中有一個與事件綁定的按鈕，單擊該按鈕時，會將ajax請求發送到服務器。 關於響應，我想向模板添加一條消息，以下是代碼：

模板：

<div id='main-view'>
<button id='delete-users'>Delete All Users</button>
</div>
<div class='message-container'></div>

骨干：

事件：

'click #users-list' : 'usersList',
'click #delete-users' : 'deleteUsers',

視圖：

usersFetch.then(function(){
    var Users = new App.Views.Users({ collection : usersCollection})
    creatDataTable();
});

刪除用戶

（按鈕事件）

deleteUsers: function(){


               $.ajax({
                   url : "<?php echo url("users/delete/all"); ?>",
                   type : "GET",
                   success : function(data){
                        if(data.result == true)
                        {
                             // Here I want to add a message to the
                             // .message-container
                             console.log("Successfully Done.");
                        }
                        else if(data.result == false)
                        {
                            console.log("An error occurred.");
                        }
                   },
                   error :  function(data){
                        console.log("An error Occurred.");
                   }
               });
            }

現在，我想向.message-container添加一條消息，而不是控制台登錄。 那我該怎么辦呢？

Answer 1

在您的success回調中，只需找到范圍為該Backbone View的消息容器。 您可以通過使用Backbone jQuery選擇器this.$來做到這一點，如下所示：

success : function(data){
   if(data.result == true)
   {
       that.$('div.message-container').text("Successfully Done.");
   }
   else if(data.result == false)
   {
       that.$('div.message-container').text("An error Occurred.");
   }
},

我是否定義了var that = this; 在$.ajax()調用之前。

您的另一個選擇是重新渲染視圖並將日期傳遞給模板。 這更昂貴，更復雜。 它還取決於您如何呈現模板。

---

元素查找的jQuery委托在Backbone源中定義為：

$: function(selector) {
  return this.$el.find(selector);
}