0

大家好，我有一个用 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;
    }
});
4

1 回答 1

1

这有什么改变吗？

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

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

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

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

你在网上有什么东西吗（JSFiddle？）我很乐意看看，但this.$el应该可以$("#search-results")快速浏览一下你的代码。

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

于 2013-04-15T02:22:49.413 回答