1

初めて ractive を試行し、エラーが発生しました。[オブジェクト オブジェクト] 繰り返し印刷されます。両方のファイルを 1 つに結合しようとしました (問題は、コレクションと広告が異なるため、両方を結合する方法は?)

広告と非広告はそれぞれ印刷されます。つまり、最初にフリーウォール レイアウトで広告アイテムが印刷され、その後、非広告アイテムが印刷されます。

コードのどこかが間違っている可能性があります。

Ractive テンプレート

 <script id="thumbnail-tmpl" type="text/ractive">
      {{items}}
        {{#if advertised}}
        <div class="thumb">
            <span class="thumb-caption">
              {{title}}
              <small>{{subtitle}}</small>
            </span>
        </div>
        {{else}}
        <div class="thumb">
         <span class="thumb-caption">
           {{title}}
           <small>{{subtitle}}</small>
         </span>
      </div>
 {{/#if advertised}}
      {{items}}
      </script>

脚本

<script>

    ;(function() {

      var finalObj = $.merge(collections, ad);
      $.getJSON(finalObj)
        .then(function(response){
          new Ractive({
            el: document.querySelector('[data-freewall]'),
            template: '#thumbnail-tmpl',
            data:{
              items: response,
              advertised: response.advertised
            }

          })

        });

    })();
    </script>

HTML

 <div data-freewall></div>
  1. 2 つの json を 1 つに結合する方法は? これらは 2 つの異なるファイルになるため、後でファイルから json を取得します。
  2. Advertised は、条件付きの印刷広告と非広告アイテムでは機能しません。Ractive Web サイトで条件付きのチュートリアルを試してみました。
  3. 広告アイテムを最初に印刷し、次に非広告アイテムをフリーウォール レイアウトでレイアウトすることは可能ですか (フリーウォールが何かわからない場合は、http://vnjs.net/www/project/freewall/ ?

助けていただければ幸いです。

更新: まだ問題があります テスト メッセージを確認してください -

[object Object],success,[object Object],[object Object],success,[object Object]

また{{/if}}、{{/each}}違法なエラーを出している

$.when(
          $.getJSON('pathto/test/collection.json'),
          $.getJSON('pathto/test/ad.json')
        ).then(function(collections, advertised){

            var items = collections.concat(advertised);
            alert(items);
            items.sort(function(a, b){
              if(a.advertised){
                return b.advertised ? 0 : -1;
              }
              else{
                return b.advertised ? 1 : 0;
              }
            });

            var ractive = new Ractive({
              el: document.querySelector('[data-freewall]'),
              template: '#thumbnail-tmpl',
              data:{
                items: items
              }

            });
        });

2 つの URL からの json ファイル

{
      "advertised": [
        { "title": "Rabbit",
          "subtitle": "Nibble",
          "advertised": true
         },
        { "title": "Dog",
          "subtitle": "Woof",
          "advertised": true
        },
        { "title": "Cat",
          "subtitle": "Purr",
          "advertised": true
        }
      ]
    }

{
      "collections": [
        { "title": "Horse",
          "subtitle": "Na~~",
          "advertised": false
        },
        { "title": "Turkey",
          "subtitle": "Gobble",
          "advertised": false
        },
        { "title": "Goat",
          "subtitle": "Baaaa",
          "advertised": false
        },
        { "title": "Snake",
          "subtitle": "hissssss",
          "advertised": false
        }
      ]
}

ページに何も表示されない - エラーが修正されても空白で表示されます。コレクションにアクセスできず、jsonファイルで宣伝されているため、jsonファイルが理由であるかどうか疑問に思っていますか?

助けてください、感謝します

4

1 に答える 1

1

取得している理由は、直接[object Object]印刷しようとしているためです-代わりに使用してください（または、コンパクトな構文を好む場合）。-代わりに使用することにもエラーがあります。{{items}}{{#each items}}...{{/each}}{{#items}}...{{/items}}{{/#if advertised}}{{/if}}

jQuery AJAXを使用している場合、2つの異なるJSONファイルからのデータを組み合わせる最も簡単な方法は、おそらくコールバックをネストすることです...

$.getJSON('path/to/collections.json').then(function (collections) {
  $.getJSON('path/to/advertised.json').then(function (advertised) {
    // code goes here
  });
});

...ただし、ファイルを並行してフェッチできるように、遅延オブジェクトを使用する方が理想的です。

$.when(
  $.getJSON('path/to/collections.json'),
  $.getJSON('path/to/advertised.json')
).then( function ( a, b ) {
  var collections = a[0].collections, advertised = b[0].advertised;
  // code goes here
});

次に、コードで 2 つの配列を結合します。2 つの配列を連結するだけなので、jQuery を使用する必要はありません。

var items = collections.concat( advertised );

を使用して好きなように並べ替えることができますitems.sort(sortFunction)。それを Ractive インスタンスにフィードすると、すべてが期待どおりに機能します (ソート関数の例があります)。

それが完了したら、コンテナ要素で freewall プラグインを使用できます。

于 2014-09-25T16:28:54.470 に答える