1

第一次尝试 ractive 并得到错误。[Object object] 重复打印。试图将两个文件合并为一个（问题是集合和广告不同，那么如何将两者结合起来？）

广告和非广告将分别打印出来，即在freewall布局中应先打印广告项，然后再打印非广告项。

在代码中的某个地方我可能出错了。

活性模板

 <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. 如何将两个json合二为一？它们将是两个不同的文件，因此稍后将从文件中提取 json。
  2. 广告不适用于有条件的印刷广告和非广告项目。在 ractive 网站上尝试了有条件的教程..
  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
              }

            });
        });

在来自两个 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，那么组合来自两个不同 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
});

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

var items = collections.concat( advertised );

您可以根据自己的喜好对它们进行排序items.sort(sortFunction)。将其输入您的 Ractive 实例，一切都按预期工作（那里有一个示例排序函数）。

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

于 2014-09-25T16:28:54.470 回答