通过表 html 触发主干.js事件

Triggering Backbone.js event via table html

本文关键字：js 事件 html 更新时间：2023-09-26

>我有以下包含表格的html视图模板：

<script id="user-home-main-table-template" type="text/template">
    <table class="table">
    <thead>
    <tr>
        <th>Club</th>
        <th>Delete?</th>
    </tr>
    </thead>
    <tbody>
    <% for(var i=0; i
    <teams.length
            ; i++) { %>
        <tr>
            <td>
                <a href='/users/<%=user._id%>/teams/<%= teams[i]._id%>/teamDashboard'>
                    <%= teams[i].club %>
                </a>
            </td>
            <td>
                <a href='/users/<%=user._id%>/teams/<%= teams[i]._id%>/deleteTeam'>
                    delete
                </a>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>
</script>

我想更改它，以便它在 Backbone 中的事件中触发事件，而不仅仅是直接向服务器发出请求：

<script id="user-home-main-table-template" type="text/template">
    <table class="table">
    <thead>
    <tr>
        <th>Club</th>
        <th>Delete?</th>
    </tr>
    </thead>
    <tbody>
    <% for(var i=0; i
    <teams.length
            ; i++) { %>
        <tr>
            <td>
                <a href='/users/<%=user._id%>/teams/<%= teams[i]._id%>/teamDashboard'>
                    <%= teams[i].club %>
                </a>
            </td>
            <td>
                <a href='make a request to Backbone when deleting team'>
                    delete
                </a>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>
</script>

这是我的主干视图代码：

var UserHomeMainTableView = Backbone.View.extend({
    tagName: "div",
    events: {},
    initialize: function () {
        this.bind();
    },
    render: function () {
        var userHomeMainTableTemplate = document.getElementById('user-home-main-table-template').innerHTML;
        this.$el.html(_.template(userHomeMainTableTemplate)());
        console.log('userHomeMainTableTemplate rendered');
        return this;
    }
});

如何在主干视图中触发与具有正确 ID 的团队相关的事件？我需要向骨干发送要删除的团队的 ID。

在UserHomeMainTableView's events哈希中，您可以添加click <your_element_selector>属性，其值为 eventHandlerName

例如

var UserHomeMainTableView = Backbone.View.extend({
    tagName: "div",
    events: {
     'click .table span' : 'deleteTeamById'
    },
    initialize: function () {
        this.bind();
    },
    render: function () {
        var userHomeMainTableTemplate = document.getElementById('user-home-main-table-template').innerHTML;
        this.$el.html(_.template(userHomeMainTableTemplate)());
        console.log('userHomeMainTableTemplate rendered');
        return this;
    },
    deleteTeamById: function (event) {
        //using event fetch the target from that fetch team or user id whatever                  you need, make sure you add it as an attribute in template and use it
        var teamId = $(event.currentTarget).attr('data-team-id');
        //Your logic to delete team
    }
});

模板可以更改为：

<script id="user-home-main-table-template" type="text/template">
    <table class="table">
    <thead>
    <tr>
        <th>Club</th>
        <th>Delete?</th>
    </tr>
    </thead>
    <tbody>
    <% for(var i=0; i
    <teams.length
            ; i++) { %>
        <tr>
            <td>
                <a href='/users/<%=user._id%>/teams/<%= teams[i]._id%>/teamDashboard'>
                    <%= teams[i].club %>
                </a>
            </td>
            <td>
                <span data-team-id="<%= teams[i]._id%>">
                    delete
                </span>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>
</script>

看看这个例子。