masonryjs 和 mustachejs 之间的冲突
Conflict between masonryjs and mustachejs
我的 javascript 中某处有一个语法错误,似乎是被忽略了。我可以通过文件将内容访问到 mustache 模板中,或者我可以对项目(图像和音频)进行硬编码并让这些项目使用 masonryjs 顺利填充页面。但是当我尝试添加两者时,其中一个或两个都不起作用。这是我的 CodePen
我期望发生的事情是从提供我的小胡子模板的文档生成我的页面。但它应该像 Pinterest 这样的网站一样平滑地堆叠,因为我使用了 masonryjs,所以图片会整齐地平铺。
这是与 Masonry 一起使用的代码
HTML
<div id="content" class="container clearfix">
<div class="item">
<img src="http://assets.wtfisthat.info/img/1.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/1.wav">
</audio>
</div>
<div class="item">
<img src="http://assets.wtfisthat.info/img/2.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/2.wav">
</audio>
</div>
<div class="item">
<img src="http://assets.wtfisthat.info/img/3.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/3.wav">
</audio>
</div>
<div class="item">
<img src="http://assets.wtfisthat.info/img/4.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/4.wav">
</audio>
</div>
<!-- The rest of the items handcoded -->
</div> <!--/ #container -->
JS
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});
但是当我添加小胡子使其不是手工编码时,它就失败了。我试过这样做
HTML
<div id="content" class="container clearfix">
<div id="image-list"></div>
<script id="imgtpl" type="text/template">
{{#images}}
<div class="item">
<img src="http://assets.wtfisthat.info/img/{{img}}" alt="{{alt}}">
<audio controls>
<source src="http://assets.wtfisthat.info/audio/{{id}}.wav">
</audio>
</div>
{{/images}}
</script>
</div> <!--/ #container -->
JS
// Streams in the data from the JSON file
$(function() {
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js', function(data) {
var template = $('#imgtpl').html();
var html = Mustache.to_html(template, data);
$('#image-list').html(html);
});
});
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});
在这里解决:http://codepen.io/anon/pen/MwJXpW
我已经更改了您的代码,以便将新元素附加到现有元素,而不是将它们推入自己的代码中 div。
然后,您应该在添加元素后使用 masonry('appended', $elements)
,如本页所述:adding items.
修改后的脚本如下:
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js', function(data) {
var template = $('#imgtpl').html();
var html = Mustache.to_html(template, data);
var $html = $(html)
$('#content').append($html).masonry( 'appended', $html);
});
我的 javascript 中某处有一个语法错误,似乎是被忽略了。我可以通过文件将内容访问到 mustache 模板中,或者我可以对项目(图像和音频)进行硬编码并让这些项目使用 masonryjs 顺利填充页面。但是当我尝试添加两者时,其中一个或两个都不起作用。这是我的 CodePen
我期望发生的事情是从提供我的小胡子模板的文档生成我的页面。但它应该像 Pinterest 这样的网站一样平滑地堆叠,因为我使用了 masonryjs,所以图片会整齐地平铺。
这是与 Masonry 一起使用的代码
HTML
<div id="content" class="container clearfix">
<div class="item">
<img src="http://assets.wtfisthat.info/img/1.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/1.wav">
</audio>
</div>
<div class="item">
<img src="http://assets.wtfisthat.info/img/2.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/2.wav">
</audio>
</div>
<div class="item">
<img src="http://assets.wtfisthat.info/img/3.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/3.wav">
</audio>
</div>
<div class="item">
<img src="http://assets.wtfisthat.info/img/4.JPG" alt="" />
<audio controls>
<source src="http://assets.wtfisthat.info/audio/4.wav">
</audio>
</div>
<!-- The rest of the items handcoded -->
</div> <!--/ #container -->
JS
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});
但是当我添加小胡子使其不是手工编码时,它就失败了。我试过这样做
HTML
<div id="content" class="container clearfix">
<div id="image-list"></div>
<script id="imgtpl" type="text/template">
{{#images}}
<div class="item">
<img src="http://assets.wtfisthat.info/img/{{img}}" alt="{{alt}}">
<audio controls>
<source src="http://assets.wtfisthat.info/audio/{{id}}.wav">
</audio>
</div>
{{/images}}
</script>
</div> <!--/ #container -->
JS
// Streams in the data from the JSON file
$(function() {
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js', function(data) {
var template = $('#imgtpl').html();
var html = Mustache.to_html(template, data);
$('#image-list').html(html);
});
});
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});
在这里解决:http://codepen.io/anon/pen/MwJXpW
我已经更改了您的代码,以便将新元素附加到现有元素,而不是将它们推入自己的代码中 div。
然后,您应该在添加元素后使用 masonry('appended', $elements)
,如本页所述:adding items.
修改后的脚本如下:
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/img.js', function(data) {
var template = $('#imgtpl').html();
var html = Mustache.to_html(template, data);
var $html = $(html)
$('#content').append($html).masonry( 'appended', $html);
});