Bu soru kesinlikle eğitim davranın lütfen.Hala yeni cevaplar ve bu fikirleri uygulamak için işitme ilgileniyorum

tl;dr

Nasıl çift yönlü veri bağlama JavaScript ile uygulamak istiyorsunuz?

Veri DOM Bağlama

Veri DOM bağlama örneğin, bir JavaScript özelliği b a nesne olmasını kastetmiştim. DOM öğesi değiştiğinde <input> DOM öğesi (örneğin) sahip, a değiştirir ve tam tersi (yani, çift yönlü veri bağlama yani).

İşte bu gibi görünüyor ne AngularJS bir diyagram:

Yani temelde JavaScript benzeri var:

var a = {b:3};

Sonra (veya başka bir form) eleman gibi bir giriş

<input type='text' value=''>

Giriş değeri a.b'In değeri (örneğin), ve giriş metni değiştiğinde, a.b değiştirmek için çok isterim. olmak istiyorum a.b JavaScript değiştiğinde, giriş değiştirir.

Soru

Bazı temel teknikleri düz JavaScript bunu yapmak için ne var?

Özel olarak ifade etmek için iyi bir cevap istiyorum:

• Nasıl nesneler için bağlayıcı işe yarar mı?
• Nasıl şeklinde değiştirin dinlemek işe yarayabilir?
• Mümkün olduğunca basit bir şekilde HTML şablonu düzeyinde değişiklik var mı? HTML bağlama izini kendisi ama sadece JavaScript (DOM olayları ile, ve DOM öğeleri kullanılan referans tutmak JavaScript) belge tutmak istiyorum.

Denedim ne var?

Şablon için kullanmaya çalıştım Bıyık büyük bir hayranıyım. Ancak, benim viewmodel nesneleri olduğu için hiçbir başvuru var sonuç aldıktan sonra verileri Bıyık beri kendini bağlama gerçekleştirmek için çalışırken bir dize olarak HTML işlerken sorunlar ile karşılaştım. Bunun için aklıma gelen tek çözüm kendini HTML dize (veya oluşturulan DOM ağacı) öznitelikleri ile değiştirmek oldu. Farklı bir şablon motoru kullanarak umursamıyorum.

Temel olarak, eldeki sorunu karmaşıklaştıran benim olduğuna dair güçlü bir his var ve basit bir çözüm var.

Not:Lütfen harici kütüphaneleri, özellikle binlerce satır kod olanları kullanın cevaplar vermeyin. (!) Kullandım AngularJS ve KnockoutJS. Gerçekten şeklinde cevaplar istemiyorum çerçevesi 'x' kullanın. En iyi şekilde, nasıl uygulanacağını kavramak için birçok çerçeveler kullanmayı bilmeyen gelecekteki bir okuyucu istiyorum çift yönlü veri bağlama kendini. Bir beklentim yoktamamlayıncevap, ama karşısındaki fikir alır.

• Nasıl nesneler için bağlayıcı işe yarar mı?
• Nasıl şeklinde değiştirin dinlemek işe yarayabilir?

Güncellemeleri iki nesne bir soyutlama

Diğer teknikler vardır sanırım, ama sonuçta ilgili bir DOM öğesi için bir başvuru içerir, ve kendi veri ve ilgili öğe güncellemelerini koordine eden bir arayüz sağlayan bir nesne olurdu.

.addEventListener() Bu çok güzel bir arabirim sağlar. eventListener arabirimi uygulayan bir nesne verebilir, ve this değeri olarak o nesne ile onun işleyicisi çağırmak olacak.

Bu eleman ve ilgili verileri de otomatik olarak erişim olanağı verir.

Nesne tanımlama

İlk miras bunu uygulamak değil tabii ki gerekli için iyi bir yoldur. İlk eleman ve bazı ilk veri alan bir kurucu oluşturmak istiyorum.

function MyCtor(element, data) {
    this.data = data;
    this.element = element;
    element.value = data;
    element.addEventListener("change", this, false);
}

Yani burada yapıcı yeni nesnenin özellikleri element ve verileri saklar. Ayrıca element verilen change bir olay bağlar. İlginç olan ikinci argüman olarak bir işlev yerine yeni bir nesne geçirir.Ama bu tek başına işe yaramaz.

eventListener arabirim uygulamak

Bu işi yapmak için, nesne eventListener arabirimi uygulamak gerekiyor. Bunu gerçekleştirmek için gerekli olan her nesne handleEvent() bir yöntem vermek.

Bu miras devreye giriyor.

MyCtor.prototype.handleEvent = function(event) {
    switch (event.type) {
        case "change": this.change(this.element.value);
    }
};

MyCtor.prototype.change = function(value) {
    this.data = value;
    this.element.value = value;
};

Pek çok farklı şekillerde olan bu yöntem, ama sizin örnek koordine güncellemeleri, karar verdim yapmak change() yöntem sadece kabul değeri, ve handleEvent geçen değeri yerine olay nesnesi. Bu şekilde change() bir olay olmadan çağrılabilir.

change olay meydana geldiğinde, eleman ve .data özelliği de güncellenir. Ve aynı JavaScript programı .change() çağırdığınızda olacak.

Kodu kullanarak

Şimdi yeni bir nesne oluşturmak ve güncelleştirmeler yapmak izin Verirdin. JS kod güncellemeleri girişi görünür, ve JS kodu görünür olur, olaylar değişir.

var obj = new MyCtor(document.getElementById("foo"), "initial");

// simulate some JS based changes.
var i = 0;
setInterval(function() {
    obj.change(obj.element.value     i);
}, 3000);

DEMO:http://jsfiddle.net/RkTMD/