14

以下のajax呼び出しから取得した配列をマッピングするこのノックアウトがあります。

function InvoiceViewModel(data) {
var self = this;

self.survey = data;

}

Ajax 呼び出し

$.ajax({
    url: 'http://localhost:43043/api/damage',
    type: 'GET',
    headers: { 'Accept': 'application/json' },
    data: {
        orderNumber: num,
        category: cat
    },
    success:
           function (data) {
               var usingRoutData = document.URL;
               ko.applyBindings(new InvoiceViewModel(data));
           },

    error: function () {
        alert('failure');
    }

});

マイアレイ

 var test = {
  Name: Blah,
  Attributes: [
               {Name: Test, Type: Photo, Year:1988},
               {Name: Test, Type: Photo, Year:1988},
               {Name: Test, Type: Photo, Year:1988}
              ]
            };

データをバインドする方法

 <div id="invoiceBodyWrapper">
<div data-bind="template: { name: 'invoice-template', foreach: surveys }">
</div>


<div class="invoiceWrapper">
    </div>
    <div id="completePictureWrapper" data-bind="template: { name: 'photo-template',     foreach: new Array(Attributes) }"></div>

</div>
</script>

<script type="text/html" id="photo-template">
<!-- ko if: classification === 'photo' -->
<div id="pictureWrappers">
    <img class="img" data-bind="attr: { src: 'http://myimagepath/download/full/' +    $index()+1 }" />
</div>
<!-- /ko -->
 </script>
  <script src="~/Scripts/DamageInvoiceCreation.js"></script>

属性 foreach ループを制限して、3 つの属性のうち 2 つだけを表示する方法が必要です。これを行う方法についていくつか見つけただけで、非常に複雑に思えます。ノックアウトでこれを行う簡単な方法がないとは想像できません。

4

8 に答える 8

7

常に 3 つの属性があり、常にそのうちの 2 つだけを表示したい場合は、それらを正確に foreach する必要はありません。

$index()ただし、レンダリングを妨げることはありませんが、いくつかの基本的な隠蔽を可能にする特別なバインディング コンテキスト変数があります。$index は 0 ベースなので、条件は$index() < 2です。Andrey がコメントで指摘しているように、$indexは observableであるため、メソッドとして括弧を付けて呼び出す必要があります。そうしないと、比較が期待どおりに行われません (int と関数を比較することになります)。

<ul data-bind="foreach: survey.Attributes">
    <li data-bind="visible: $index() < 2">
        Name: <span data-bind="text: Name"> </span><br/>
        Type: <span data-bind="text: Type"> </span><br/>
        Year: <span data-bind="text: Year"> </span><br/>
    </li>
</ul>

foreach ループで一般的なリミッターが必要な場合は、その通りです。単純ではありません。カスタム バインディングを作成する必要があります。

検討できる別のアプローチは、ビューモデルでデータを前処理することです。を設定this.survey = data;すると、その時点で表示したくない属性を削除できます。

編集：あなたの編集から、ko: if疑似要素について知っていることがわかります。私はそれらを完全に忘れていましたが、特定のインデックスを超えてテンプレート アイテムをレンダリングすることを簡単に防ぐことができます。はforeach引き続きオブザーバブルを評価しますが、それ自体で大きなオーバーヘッドが発生することはありません。

于 2013-07-24T17:35:22.683 に答える
3

限られた配列制限で計算されたものを作成できます：

var limited = ko.computed( function() {
   return Attributes.slice(0, limit);
});

あとは、foreach を制限するために必要なことです。ある種の "more" 要素を追加することもできます:

<!-- ko if: Attributes().length > limit -->
    <div class="more">...</div>          
<!--/ko-->

次の世代にも役立つことを願っています;）

于 2015-07-17T14:38:35.447 に答える
0

元の配列アイテムのサブセットをビューモデルの別の配列にプッシュし、サブセット配列にバインドすることで、同様の問題を解決しました。

于 2013-12-23T16:52:28.450 に答える
0

以下のように試すことができます： 

 <!-- ko foreach: { data: attributes, as: 'item' } -->
    <!-- ko if: $index() < 2 -->
    <span class="item" data-bind="text:item.name"></span>
    <!-- /ko -->
    <!-- /ko -->

例 ：

<ul data-bind="foreach: listItems">
                <li data-bind="attr: {id: id} ">
                  <a href="#" data-bind="text: label"></a>
                </li>
 </ul>
于 2019-04-23T10:59:18.507 に答える