如何绑定多个具有相同敲除功能、传递不同ID的链接

How to bind multiple links with same knockout function passing different IDs

本文关键字：功能 链接 ID 绑定 何绑定      更新时间：2023-09-26

问题：我是KnockoutJS的新手。下面的示例代码适用于我。但是您可以看到fetch函数是硬编码的，并且只适用于id=100的用户。如何为html表列表中的每一行创建Get链接，并将该记录的id传递给fetch函数，该函数仅在控制台中显示该特定行的记录。有什么想法吗？

HTML:

<div  id="users-view-data">
    <button type="button" data-bind="click: fetch">Get</button>
    <button type="button" data-bind="click: remove">Delete</button>
    <button type="button" data-bind="click: listAll">Get All</button>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Code</th>
            <th>Created</th>
            <th>Action</th>
        </tr>
        <tbody data-bind="foreach: collection">
            <tr>
                <td><span data-bind="text: id"></span></td>
                <td><span data-bind="text: name"></span></td>
                <td><span data-bind="text: code"></span></td>
                <td><span data-bind="text: created"></span></td>
                <td>Get Link will come here to call fetch funtion</td>
            </tr>
        </tbody>
    </table>
</div>

JS:

<script type="text/javascript">
(function() {
    'use strict';
    var UserViewModel = function() {
        this.service = ko.rest.service('http://domain/users');
        this.model = ko.observable( { id:0, name:'', code:'' } );
        this.collection = ko.observableArray([]);
    };
    UserViewModel.prototype.listAll = function() {
        var self = this;
        self.service.query(function(data) {
           self.collection(data);
        });
    };
    UserViewModel.prototype.fetch = function() {
        var self = this;
        self.service.load(100, function(data) {
            self.model(data);
            console.log(data);
        });
    };
    UserViewModel.prototype.remove = function() {
        var self = this;
        var code = ko.rest.get(self.model(), 'id');
        self.service.delete(code, function(data) {
            console.log(data);
        });
    };
    ko.applyBindings( new UserViewModel(), document.getElementById("users-view-data") );
})();
</script>

我正在使用以下库：

  • 敲除3.3.0.js
  • knockout.mapping-latest.js
  • knock-out-rest.min.js

如果我正确理解您想要的内容，您需要将100替换为对当前ID的引用，如下所示：

UserViewModel.prototype.fetch = function() {
    var self = this;
    self.service.load(self.model().id, function(data) {
        self.model(data);
        console.log(data);
    });
};

为每行添加一个点击处理程序：

<tr data-bind="click:function(){$root.fetch(id)}">
    <td><span data-bind="text: id"></span></td>
    <td><span data-bind="text: name"></span></td>
</tr>

修改您的提取函数以获取id:

UserViewModel.prototype.fetch = function(id) {
    var self = this;
    //do whatever with id
};

（简化）小提琴

相关文章：