Question

大家好我在cakephp开发了一个网站，我想将骨干网整合在一起对于我的范围，我将使用外部js作为主干来重用代码我写了一些行但是我不能在我的元素上附加结果我试图在这种模式下打印“el”：

console.log($(this.el));
console.log(this.el);
console.log(this.$el);

但是我无法进入el进行简单的追加！容器#search-results已经存在这是我的主要观点：

<script type="text/javascript">

var search = {};
search.product = {};
search.product.template = "#results-product-template";
search.product.container = "#search-results";
search.product.defaults = {
    id:0,
    type:"product",
};

$(function(){
    var ProductList = new Search.Collections.Products();

    var ProductView = new Search.Views.Product({
        // new Search.Collections.Products();
        collection:ProductList
        ,el:$("#search-results")
    });

    function parseResults () {
                var json = {
                //my data
                }
        for (var i = json.products.length - 1; i >= 0; i--) {
            ProductList.add([new Search.Models.Product(json.products[i])]);
        };

        updateResults();
    }

    function updateResults () {
        console.log('updateResults: Ritorno il risultato quando hunter riceve una risposta dal server');
        if ($('#search-results').length == 0) {
            $('div.main > section:first-child').before('<section id="search-results"> <ul id="product-results"> <li>Contenuto</li> </ul> </section>');
        }
        ProductView.render();
    }

    // search
    $('#search-results .close').on('click', function () {
        $('#search-results').animate({height:0}, 500, function () {
            $(this).remove();   
        })
    });


});
</script>

这是我的外部js主干

var Search = {
    Models: {},
    Collections: {},
    Views: {},
    Templates:{}
}

Search.Models.Product = Backbone.Model.extend({
    defaults: search.product.defaults || {},
    toUrl:function (url) {
        return url.replace(" ", "-").toLowerCase();
    },
    initialize:function () {
        console.log("initialize Search.Models.Product");
        this.on("change", function (){
            console.log("chiamato evento change del Model Search.Models.Product");
        });
        this.on("change:text", function () {
            console.log("chiamato evento change:text del Model Search.Models.Product");
        });
    }
});

Search.Collections.Products = Backbone.Collection.extend({
    model: Search.Models.Product,
    initialize:function () {
        console.log("initialize Search.Collections.Products");
        console.log(this);
        console.log(this.length);
        console.log(this.models);
    }
});

Search.Views.Product = Backbone.View.extend({
    initialize:function () {
        console.log("initialize Search.Views.Product");
        console.log($(search.product.template).html());

    },
    template:function (data) {
        if (data == null) {
            data = this.collection.toJSON(); 
        }
        var template = Handlebars.compile($(search.product.template).html());
        template(data);
    },
    render:function () {
        console.log($(this.el));
            $(this.el.append("TEST"));
            //HERE IS THE PROBLEM
            // I have tried this.$el.append("TEST");
        return this;
    }
});

Answer 1

这会改变什么吗？

var ProductView = new Search.Views.Product({
    // new Search.Collections.Products();
    collection:ProductList,
    el:$("#search-results")[0]
});

我认为骨干可以同时接受jQuery包装或未包装的对象并且很好，但我不知道你正在使用什么Backbone版本，看看是否有效

编辑：从主干1.0源代码来看，似乎主干确实可以采用jQuery包装对象或常规dom元素，它应该仍然可以工作

this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);

你有在线的东西吗（JSFiddle？）我很乐意看一看，但this.$el应该可以在你的代码中快速一目了然地等同于$("#search-results")。

您是否尝试过使用ProductView.setElement($("#search-results"))？它应该是相同的，但也值得一试。

使用外部js的主干

1 个答案: