使用淘汰赛动态构建 HTML答案

【问题标题】：Building HTML dynamically with knockout使用淘汰赛动态构建 HTML
【发布时间】：2015-05-01 17:53:58
【问题描述】：

我在 C# 的 MVC4 项目中有一个单页应用程序。

在我的 HTML 中，我有一个类似表格的列表 - 第一个是表格标题，第二个是具有“foreach”属性（敲除）的 div，并显示了我列表中的所有项目。

现在，我需要这个“表格”是动态的 - 我将获得一个列列表和“指令”（列标题、列类名称、列值名称、css 条件等），HTML 将是动态构建。淘汰赛可以吗？

这是我现在的代码。只有 5 列。我需要它是动态的，这样我就可以通过更改指令列表轻松添加（和删除）列，而无需触及 HTML。

    <ul class="assetsTitles">
        <li class="ItemKey" data-bind="click: sortBy.bind($data, 'Key'), css: { selected: Filter().OrderBy() == 'Key', desc: Filter().Descending() }"><span>Key</span></li>
        <li class="ItemName" data-bind="click: sortBy.bind($data, 'Name'), css: { selected: Filter().OrderBy() == 'Name', desc: Filter().Descending() }"><span>Item Name</span></li>
        <li class="ItemProp1" data-bind="click: sortBy.bind($data, 'ItemProp1'), css: { selected: Filter().OrderBy() == 'ItemProp1', desc: Filter().Descending() }">ItemProp1</li>
        <li class="ItemProp2" data-bind="click: sortBy.bind($data, 'ItemProp2'), css: { selected: Filter().OrderBy() == 'ItemProp2', desc: Filter().Descending() }">ItemProp2</li>
        <li class="ItemProp3" data-bind="click: sortBy.bind($data, 'ItemProp3'), css: { selected: Filter().OrderBy() == 'ItemProp3', desc: Filter().Descending() }">ItemProp3</li>
    </ul>

<div data-bind="foreach: items, visible: items().length > 0">
    <div class="itemRow" data-bind=" attr: { id: RowId() }">
        <ul class="itemRowDetails " data-bind="visible: ShowDetails, selected: IsSelected, click: $parent.showItemDetails.bind($data, $data, $parent.type), css: { selected: IsSelected() }">
            <li class="ItemKey" data-bind=" title: Key"><span data-bind="text: Key" /></li>
            <li class="ItemName" data-bind=" title: Name"><span data-bind="text: Name" /></li>
            <li class="ItemProp1" data-bind=" title: ItemProp1"><span data-bind="text: ItemProp1" /></li>
            <li class="ItemProp2" data-bind=" title: ItemProp2"><span data-bind="text: ItemProp2" /></li>
            <li class="ItemProp3" data-bind=" title: ItemProp3Display"><span data-bind="text: ItemProp3Display, css: { alertDetail: ItemProp3Alert, alertDetail2: ItemProp3Alert2 }" /></li>
        </ul>
    </div>
</div>

【问题讨论】：

是的。有可能的。当前代码有什么问题？
它不是动态的。它是硬编码的。我需要获取列和属性列表。
如果我想添加一列 - 我需要更改 HTML。我不想这样做，我希望它是动态的，按照我想要发送到 UI 的指令集。

标签： c# html knockout.js

【解决方案1】：

你可以使用 ko.renderTemplate 并做一些类似的事情：

  <!-- ko foreach:$root.visibleColumns() -->\
     <li  data-bind=\"attr:{'data-columnname' : columnName}\" role=\"column\" ><span  data-bind=\"attr:{'class': columnHeaderCss, 'data-columnname' : columnName,'data-headertext': headerText}, text: headerText\"></span> </li>\
  <!-- /ko -->\

并将列列表传递给 viewModel ：

 ko.dataGrid = {
    viewModel: function (configuration) {
         var me = this;
          $.extend(me, {
            columns: configuration.columns,
             visibleColumns: function () {
                   var res = [];
                    $.each(me.columns, function (i, c) {
                        if (c.visible)
                            res.push(c);
                    });

                return res;
            },
          });
      }

【讨论】：

很好，但不是 100%。我有两个清单。一个带有说明（me.columns），一个带有项目。我需要一行来从两个列表中获取值，例如 - 来自“说明”的类和来自项目的文本值（根据右列）。我该怎么做？
因为我使用了“addTemplate(templateName, templateMarkup)”函数，templateEngine.addTemplate("dataGrid", "\ \ \ \")
您可以通过“配置”发送任意数量的数组，正如您在我使用的示例中看到的那样：“text: headerText”，标题文本可以像列一样绑定，您可以扩展您的 viewModel
这对标题来说很棒，但我对项目本身有问题 - 显示项目的列值 - item.'columnName'（item.Key、item.Prop1 等）：
好的，我找到了方法 - item[columnName]()

【解决方案2】：

您可以尝试使用传统技术在脚本中构建 html，然后将其附加到元素上。然后要将其添加到绑定中，需要将该元素的名称作为第二个参数包含在内：

ko.applyBindings(viewModel, dynamicElement)

另外，ko 有 html ("html:") 和文本绑定 ("text:") 选项。

在代码中构建 html 时，您可能需要使用“无容器控制流语法”，即包装在注释符号中，例如 ....  其中 myItems 是一个数组。

通常的警告适用于可能的注入攻击！

好久没和ko玩了..

【讨论】：