设计模式:动态显示HTML / JS控件

Question

我正在创建一个ASP.NET MVC应用程序，人们可以在其中点击不同的类别，然后动态地显示相应的订单，并且在商品后面没有回发(带有一些花哨的动画等)，所以它应该是某种“一页样式”

<div class="category" id="categoryIT">
   <div class="item" data-product="software">Software</div>
   <div class="item" data-product="notebooks">Notebooks</div>
   <div class="item" data-product="permissions">User permissions</div>

   <div class="orderView" style="display:none"></div>
</div>

<!-- templates -->

<div class="orderViewTemplate" id="templateSoftware">
   <!-- Inputs, sliders, accordions, etc -->
</div>
<div class="orderViewTemplate" id="templateNotebooks">
   <!-- Inputs, sliders, accordions, etc -->
</div>
<!-- etc -->

订单表单由相当多的代码组成，例如不同的手风琴、滑块、输入。

我的第一种方法是将orderView项的内容设置为某种(不可见的)模板化orderForms的内容

$(document).ready(function () {

    function scrollto(element) {
        $('html, body').animate({ scrollTop: ($(element).offset().top) }, 'slow');
    };

    $(".item").on('click', function () {
        var product = $(this).data('product');
        var item = $(this);

        try {

            $(".orderView").fadeIn("slow", function () {
                item.closest('.category').find(".orderView").html($("#templateSoftware").html());
            });

            $('html, body').animate({
                scrollTop: item.closest('.category').find(".orderView").offset().top
            }, 'slow');

           // Initialize the JavaScript for the newly generated controls

        } catch (ex) {
            alert(ex);
        }
    });


});

但这看起来相当肮脏，因为随着类别/项目数量的增加，视图将变得巨大。我想一定有更好的办法，我只是不太清楚。有什么想法吗？

Answer 1

如果您可以放宽“无回发”的限制，我建议使用AJAX调用在每个orderViewTemplate第一次被访问时(或在页面加载后的某个时间间隔)获取每个are的内容。这减少了你最初的视图页面下载大小，而且你仍然可以在运行时缓存或预缓存每个orderViewTemplate的内容，让你的UI体验部分恢复。

或

坚持你已经拥有的方式，不要担心它，直到它成为一个问题。如果这是项目的早期阶段，通常最好先构建，然后再优化。(除非你的目标平台是超带宽限制的)