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

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

我一直在努力解决这个问题，今天正在寻找替代方案。但是，在与同事交谈后，我们终于找到了解决我的问题的方法。在这里我不会解释 Model、View 和 Collection 是如何协同工作的，只是简单地解释 technique/trick 在 .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>）时，高度 = 1020 且 id = 2，它看起来像这样：

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

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

希望对您有所帮助。

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

Dynamically Creating Multiple <section> with Different Heights According to Input

html

css

jquery

backbone.js

underscore.js