Omurga. "El" kafa karışıklığını görüntüleyin

Bir görüş nasıl elele alınmalıdır? Ayarlanması gerekir, aksi takdirde olaylar tetiklenmez ( buraya bakın ).

Ama zaten sayfada bulunan bir öğe olmalı mı? Uygulamamda bir (jQuery Şablonları) şablonunu Fancybox'a dönüştürüyorum. elBu durumda ne olmalı ?

Bir görünüm, tüm olay bağlamanın gerçekleştiği yerdir. Kullanmak zorunda değilsiniz, ancak omurganın olayları ateşlemesini istiyorsanız, işleme işinizi el üzerinde yapmanız gerekir. Bir görünüm, bir DOM öğesidir, ancak önceden var olan bir öğe olması gerekmez. Mevcut sayfanızdan bir tane çekmezseniz oluşturulacaktır, ancak herhangi bir şey yaptığını görmek isterseniz sayfaya eklemeniz gerekecektir.

Bir örnek: Tek tek öğeleri oluşturan bir görünüme sahibim

window.ItemView = Backbone.View.extend({
    tagName: "li", //this defaults to div if you don't declare it.
    template: _.template("<p><%= someModelKey %></p>"),
    events: {
         //this event will be attached to the model elements in
         //the el of every view inserted by AppView below
        "click": "someFunctionThatDoesSomething"
    },
    initialize: function () { 
        _.bindAll(this, "render");
        this.render();
    },
    render: function () {
        this.el.innerHTML = this.template(this.model.toJSON());
        return this;
    }
});
window.AppView = Backbone.View.extend({
    el: $("#someElementID"), //Here we actually grab a pre-existing element
    initialize: function () { 
        _.bindAll(this, "render");
        this.render(new myModel());
    },
    render: function (item) { 
        var view = new ItemView({ model: item });
        this.el.append(view.render().el);
    }
});

İlk görünüm yalnızca liste öğelerini oluşturur ve ikinci görünüm bunları gerçekten sayfaya yerleştirir. Bunun backbone.js sitesindeki Yapılacaklar örneğine oldukça benzediğini düşünüyorum . Bence kongre, sizi içeriğe dönüştürmek içindir. Böylece el, şablonlu içeriğinizi yerleştirmek için bir iniş yeri veya bir kap görevi görür. Backbone daha sonra olaylarını içindeki model verilerine bağlar.

Bir görünüm oluşturduğunuzda kullandığınız dört şekilde el manipüle edebilir el:, tagName:, className:, ve id:. Bunların hiçbiri bildirilmezse, varsayılan olarak kimliği veya sınıfı olmayan bir div'dir. Ayrıca bu noktada sayfayla da ilişkili değildir. TagName kullanarak etiketi başka bir şeyle değiştirebilirsiniz (örneğin tagName: "li", size bir dizi verecektir <li></li>). Diğer kimliğini ve sınıfını da aynı şekilde ayarlayabilirsiniz. Yine de sayfanızın bir parçası değil. El özelliği, el nesnesinin çok ince gren işlemesini yapmanızı sağlar. Çoğu zaman birel: $("someElementInThePage")bu aslında sizin görüşünüzde yaptığınız tüm işlemleri geçerli sayfaya bağlar. Aksi takdirde, görünümünüzde yaptığınız tüm sıkı çalışmanın sayfada görünmesini istiyorsanız, bunu görünümünüzde başka bir yere (muhtemelen renderda) eklemeniz / eklemeniz gerekecektir. El'i tüm görüşünüzün manipüle ettiği bir kap olarak düşünmeyi seviyorum.

Şimdi biraz yaşlandım, ama benim de kafam karışmıştı ve bu yüzden buraya gelen diğer insanlar için bu keman yardımcı olabilir - http://jsfiddle.net/hRndn/2/

var MyView = Backbone.View.extend({

    events: {
        "click .btn" : "sayHello",
    },

    sayHello : function() {
        alert("Hello");
    },


    render : function() {
        this.$el.html("<input type='button' class='btn' value='Say Hello'></input>");

    }
});

$(function() {
    myView = new MyView({el:"#parent_id"});
    myView.render();
});

'El'inizin, görünümünüzde bir değişikliği tetikleyen herhangi bir olaya sahip bir alt öğe içeren bir öğeye başvurmasını istiyorsunuz. "Body" etiketi kadar geniş olabilir.