Question

第一次尝试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>

如何将两个json组合成一个？它们将是两个不同的文件，因此稍后将从文件中提取json。
广告不适用于有条件打印广告和非广告项目。在ractive网站上尝试了有条件的教程..
是否可以先将广告项目打印出非广告项目，然后再将其放置在自由墙布局中（如果您不知道自由墙是什么，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
              }

            });
        });

来自两个网址的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文件中做广告？

请帮助并欣赏它

Answer 1

您获得[object Object]的原因是您尝试直接打印{{items}} - 请改为使用{{#each items}}...{{/each}}（或仅使用{{#items}}...{{/items}}更喜欢紧凑的语法）。 {{/#if advertised}}也有错误 - 请改用{{/if}}。

如果您正在使用jQuery AJAX，那么组合来自两个不同JSON文件的数据的最简单方法可能是嵌套回调......

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

...尽管使用deferreds会更加理想，以便您可以并行获取文件：

$.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
});

现在为代码组合两个数组。你不需要为此使用jQuery，因为你只是连接两个数组：

var items = collections.concat( advertised );

您可以使用items.sort(sortFunction)对它们进行排序。将其输入您的Ractive实例，然后everything works as expected（那里有一个示例排序函数）。

完成后，您可以使用容器元素上的freewall插件。

在Ractive中，合并2个json文件并相应地打印出来

1 个答案: