Question

我使用Backbone.js，underscore.js，jQuery，.CSS和HTML通过模板动态创建<section>。

我希望它做的是每当用户键入值或使用滑块时，信息将与backbone.js一起存储，然后加载下面的模板。将使用指定的高度创建<section>。话虽这么说，我需要假设每个<section>都有不同的高度，无论内容如何。

This is a screenshot of what I currently have with all sections having the same height

这是模板：

<script type="text/template" id="section-template">
       <section class="view">
              <label><%- height %></label>
              <label><%- color %></label>
       </section>
</script>

我在jQuery中尝试了这个，但显然它不起作用，因为这适用于所有<section>。

CSS：

section {
    height: 200px;
}

jQuery的：

$( "#slider" ).slider({
          range: "max",
          min: 50,
          max: 500,
          value: 300,
          slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $('section').css('height', ui.value);
          }
  });

我的问题是，以不同的高度动态创建<section>的最佳技巧是什么？最好不要使用任何插件。

提前谢谢。

Answer 1

我一直在努力寻找替代品。然而，在与同事交谈后，我们终于找到了解决问题的方法。在这里，我不会解释模型，视图和集合如何协同工作，而只是在.CSS中动态创建节标记的技巧/技巧，以便每个<section>可以有不同的高度。

首先，我通过在JavaScript中使用全局变量来创建唯一的数字ID：

var counter = 0;

每当用户输入一个值来指定新的<section>高度时，变量会增加1，然后在Backbone.View.extend()内的函数中创建一个模型：

counter++; //1

Sections.create({height: h, id: counter}); //create a model in Collection with the attributes where h = 500 and counter = 1 in this case

然后我写入.CSS指定此模型的高度，或者在这种情况下指定id='1'：

$('#section-'+counter).css('height', h);

在创建模型时，我在.CSS中给出了这个：

#section-1 {
    height: 500;
}

现在，我在模板id=section-<%- id %>中添加<section>：

<script type="text/template" id="section-template">
    <section class="view" id=section-<%- id %>>
          <label><%- height %></label>
    </section>
</script>

您可能已经猜到，每次创建模型时都会将id: counter加载到模板中，并为其提供唯一ID。

看起来像height = 500和id = 1：

<section class="view" id="section-1">
        <label>500</label>
</section>

因此，当创建下一个模型（或<section>），其中height = 1020且id = 2时，它将如下所示：

<section class="view" id="section-2">
        <label>1020</label>
</section>

您可以想象现在每个<section>在HTML上都有自己的高度，因为它有一个专用的id标记，并且只会在.CSS中调用相同的id标记。

我希望这会有所帮助。

根据输入动态创建具有不同高度的多个<section>

1 个答案: