2

以下のようにプロパティ名を明示的に記述せずに、'td with data-bind： "text：propertyName"'を動的に追加する方法はありますか？：

<table>
<tbody data-bind="template: {name: 'Tmpl', foreach:person}">                      
</tbody>

<script id="Tmpl" type="text/html">
 <tr class="tableRow">
  <td data-bind="text: Name"></td>
  <td data-bind="text: Age"></td>
 </tr>
</script>
</table>

'person'の私のdataSourceは、異なるプロパティ名と異なる数のtdを持つことができるため、非常に動的です。私が試したのは：

<table>
<tbody data-bind="template: {name: 'Tmpl', foreach: person}">                      
</tbody>
<script id="assessmentTmpl" type="text/html">
 <tr class="tableRow">
  <td data-bind="text: $data"></td>
 </tr>
</script>
</table>

しかし、それはオブジェクト自体を与えるだけであり、プロパティを与えるものではありません。私はknockout.jsを使用してこれを実行しようとしていますが、代わりにjqueryを使用してtdを動的に追加する必要がある場合があります。

4

2 に答える 2

3

迷ったらカスタムバインディングを試してみてください！

<table>
    <tbody data-bind="template: {name: 'Tmpl', foreach:person, as : per}">                      
    </tbody>

    <script id="Tmpl" type="text/html">
        <tr class="tableRow" data-bind="createRow: per">
        </tr>
    </script>
</table>

ko.bindingHandlers.createRow =
{
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        for(var item in valueAccessor())
        {
            $(element).append('<td data-bind="text:' + valueAccessor()[item] + '"></td>');
        });
    }
};

データバインディングが正しくない場合は、その更新メソッドで値を自分で出力できます。

$(element).append('<td>' + valueAccessor()[item] + '</td>');
于 2013-03-04T20:09:48.107 に答える
0

前の回答で提案されたものと同じアプローチを使用して、次のコードを作成しました。より「エレガント」なものにリファクタリングできることに注意してください。

ビューコード:

<table class='table table-striped table-bordered'>
    <thead>
        <tr class="tableRow" data-bind="createTheadRow: userEntityObj.UserList()[0]"></tr>
    </thead>
    <tbody data-bind="foreach:userEntityObj.UserList">
        <tr class="tableRow" data-bind="createTbodyRow: $data"></tr>
    </tbody>
</table>

カスタムバインディング:

ko.bindingHandlers.createTheadRow =
{
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        if($(element).html() == '')
        if (valueAccessor() != null)
        for (var key in valueAccessor())
            $(element).prepend('<th>' + key + '</th>');
    }
};
ko.bindingHandlers.createTbodyRow =
{
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        if (valueAccessor() != null)
        for (var key in valueAccessor())
            $(element).prepend('<td data-bind="text:' + key + '"></td>');
    }
};

これにより、ソースのプロパティを知らなくてもテーブルを生成できます。また、これを tr ブロックに追加するだけで、カスタム TD フィールド (たとえば、編集/削除ボタン用) を追加することもできます (バインディングはプリペンドを作成するため、カスタム TD は TR の最後に表示されます)。

于 2013-06-22T15:48:49.277 に答える