Question

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

在我的HTML中，我有一个类似于表格的列表 - 首先是表格标题，第二个是带有＆＃34; foreach＆＃34; property（knockout）并显示我列表中的所有项目。

现在，我需要这个＆＃34; table＆＃34;要动态 - 我会得到一个列列表和＆＃34;指令＆＃34; （列标题，列类名，列值名称，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>

Answer 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;
            },
          });
      }

Answer 2

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

ko.applyBindings（viewModel，dynamicElement）

或者ko有html（＆＃34; html：＆＃34;）和文本绑定（＆＃34; text：＆＃34;）选项。

在构建代码中的html时，您可能需要使用＆＃34;无容器控制流语法＆＃34;即包括在评论符号中，例如 .... 其中myItems是一个数组。

关于可能的注射攻击通常需要注意事项！

自从我玩ko以来已经有一段时间了。

使用knockout动态构建HTML

2 个答案: