0

所以我确信我不是第一个尝试这样做的人，但我找不到任何与我正在尝试做的事情相匹配的例子，所以我在这里。

我有一个这样定义的 Knockout 自定义绑定。

 ko.bindingHandlers.table = {
    init: function (element, valueAccessor) {
        value = ko.unwrap(valueAccessor());
        //Create a table
};

目标是最大限度地减少想要创建表的用户必须了解的有关 javascript 的信息。我希望他们提供的 HTML 类似于：

data-bind="table: foo, columns: ['id', 'first name', 'last name', ect...]"></table>

我希望能够以类似数组的格式指定列（再次尝试不使用任何 JS）。我知道我可以做一些愚蠢的事情，比如 col1: 'id', col2: 'first name' 但我宁愿有一个对象/数组，我可以很容易地做一个 .length() 来做我的桌子。

我确实有一个使用 Jquery 处理数据的变通方法，但如果可以的话，我宁愿做这样的事情。

最后但不是租约，我假设我将通过 allBindings 访问器访问该对象，如果我弄错了，请告诉我。先感谢您。

4

1 回答 1

2

您最好使用现有的表绑定处理程序之一。Knockout Contrib 的 KO Grid、@MichaelBest 上面建议的表格或任何其他已经存在的表格。

关于你的问题；绑定数组就像您想象的那样简单，只需在绑定中输入数组（或绑定到包含数组的属性）。但是，您实际上是在询问使用 abindingHandler从多个绑定中读取设置。为此，请使用您的init/update函数的第三个参数bindingHandler，即allBindings参数。

这种绑定的一个简单示例可能是：

ko.bindingHandlers['table'] = {
    init: function(element, valueAccessor, allBindings){
        var data = ko.unwrap(valueAccessor());
        var columns = allBindings.get('columns');
        var table = document.createElement('table');
        for(var i = 0; i < data.length; i++){
            var currentItem = data[i];
            var row = document.createElement('tr');
            for(var j = 0; j < columns.length; j++){
                var column = document.createElement('td');
                column.innerText = currentItem[columns[j]];
                row.appendChild(column);
            }
            table.appendChild(row);
        }
        element.appendChild(table);
    }
};

然后你会bindingHandler像这样使用它：

<div data-bind="table:data, columns: ['id','firstName']"></div>

我在http://jsfiddle.net/TK9y2/有一个使用上述绑定的工作示例

请注意，该allBindings参数还提供了一个has方法，您应该使用该方法来检查是否存在与您要查找的名称的绑定。您可以在自定义绑定的 Knockout 文档中阅读相关内容。

于 2014-04-16T06:32:04.133 回答