如何在基于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);
}