Question

我遇到了Backbone / Underscore模板的一些问题，因为我对网络开发很陌生我读了这篇文章： https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout我发现它真的很有趣所以我试图编写相同的程序但是在骨干中。

我想在id中使用id = col-12在div中插入列表，但似乎骨干不会这样做。我很抱歉我的错误，但我以前从未编写过Javascript或Html编程，我确信在我的脑海里有一些困惑，你可以帮助我理解。这是我的代码的一部分：

<script id="itemTemplate" type="text/template">
    <%= name %>
</script>

        $( document ).ready(function() {

            // Model
            var Item = Backbone.Model.extend({
            });

            // Collection
            var ItemsCollection = Backbone.Collection.extend({
                model: Item
            });


            // View for all elements
            var ItemsView = Backbone.View.extend({
                tagName : 'div',
                el : $('#col-12'),

                render: function() {
                    this.collection.each(function(item) {
                        var itemView = new ItemView({ model: item });
                        this.$el.append(itemView.render().el);
                    }, this);

                    return this;
                }
            });

            // View for a single element
            var ItemView = Backbone.View.extend({
                tagName : 'span',

                template: _.template($('#itemTemplate').html() ),

                render: function() {
                    this.$el.html( this.template(this.model.toJSON()) );
                    return this;
                }
            });


            var runBackbone = document.getElementById("run-backbone");
            runBackbone.addEventListener("click", function() {

            var data = _buildData();

            date = new Date();

            // It creates the collection
            var itemsCollection = new ItemsCollection;

            for (var i = 0; i < data.length; i++)
            {
                newItem = new Item ({name: data[i].label});
                itemsCollection.add(newItem);
            }

            var itemsView = new ItemsView({ collection: itemsCollection });
            $(document.body).append(itemsView.render().el);

            runBackbone.innerHTML = (new Date() - date) + " ms";


            });

            });

<div class="col-md-3">
    <div class="row">
        <div class="col-md-7">
            <h3>Performance Backbone:</h3>
        </div>

        <div class="col-md-5 text-right time" id="run-backbone">Run</div>
    </div>

    <div id="backbone">
        <div class="row">
            <div class="col-md-12 test-data" id="col-12">

            <!--HERE!!!!-->

            </div>
        </div>
    </div>
</div>

Answer 1

我决定删除此行：el : $('#col-12'), 并修改此行：$(document.body).append(itemsView.render().el);至$("#col-12").append(itemsView.render().el);

带有主干的模板和对性能的怀疑

1 个答案: