JsView, iç içe geçirme özelliklerinin yanı sıra kök nesnede veri bağının nasıl yapıldığını gösterir?

Question

Bir nesneyi, tam olarak neyin bağlı olduğu sorusunu yeniden sormamı sağlayan bir forma bağlayan veriler olduğunda garip davranışlar yaşıyorum?

Temel olarak, yeni Şirketler oluşturan ve bunları güncelleyen bir formum var. Asıl oluşturma/güncelleme ajax üzerinden yapılır, bu yüzden aynı formu her iki amaçla da kullanıyorum. Bir şirket oluşturmam gerektiğinde, her şey beklediğim gibi çalışır. Ancak bir şirketi güncellemem gerektiğinde, işler beklediğim gibi çalışmıyor. Lütfen aşağıdaki koda bir göz atın. İşte

<div id="result"></div> 

<script type="text/x-jsrender" id="CompanyFormTemplate"> 
    <form> 
     <input type="text" data-link="Company.Name" /> 
    </form> 
</script> 

benim JavaScript kodu:

İşte benim örnek Formu HTML

var app = new CompanyFormContext(); 

function CompanyFormContext() { 
    this.Company = { 
     Name: '' 
    }; 

    this.setCompany = function (company) { 
     if (company) { 
      $.observable(this).setProperty('Company', company); 
     } 
    }; 
}; 

$(function() { 
    initPage(); 

    ... 

    if (...) { 
     // we need to update company information 

     app.setCompany({ Name: 'Company ABC' }); 
    } 
}); 

function initPage() { 
    var template = $.templates('#CompanyFormTemplate'); 
    template.link("#result", app); 
} 

yerine 'Şirket ABC' gösteren form girdi, bu boş. Bununla birlikte bir şey girersem, Company.Name değeri değişir! Ancak, veri girişinin Şirketim nesnesinin Name özelliğine bağlanmasını istediğim halde, aynı zamanda (ana) Şirket nesnesinde yapılan herhangi bir değişiklikten haberdar olmasını ve buna göre Name özelliğine bağlanan verileri güncellemesini istiyorum.

Benim sorum şu, bu kodu yazdığım şekilde nasıl değiştirmeliyim, böylece hem kök nesnesinde hem de özellikte bağlı bir veriye ulaşabilirim?

Answer 1

Karşılaştığınız sorun, yalnızca, yaprak özelliği değil, aynı zamanda yolun üst tarafındaki nesneleri değiştirmeyle ilgili değişikliklere veri bağlantısı yapmak istediğiniz Company.Name gibi yollara sahip olmanızdır. bu dava Şirket.

Bunun için data-link="Company^Path" sözdizimini kullanmanız gerekir. Bu belgeler konudaki yaprak değişiklikleri veya derin değişiklikler: http://www.jsviews.com/#observe@deep

bölüm Yollar bakın.Ayrıca, gibi örneklere de bakınız. Örnek: düz nesneler ve dizi ile JsViews: http://www.jsviews.com/#explore/objectsorvm.

İşte bu sözdizimini kullanarak jsfiddle'ın bir güncelleştirmesi: https://jsfiddle.net/msd5oov9/2/.

BTW FWIW, {^{for}} kullanarak düzeltme ikinci bir şablon kullanmak yoktu - alternatif olarak yazmış olabilirdi:

<form class="form-horizontal"> 
    {^{for Company}} 
     ... 
     <input type="text" data-link="Name" /> 
    {{/for}} 
</form> 

aşağıda yorumunuzda sizin takip soruya da yanıt vermek için herhangi bir 'blok' etiketini şablonla ilişkilendirebilirsiniz. Etiketin üzerinde tmpl=... kullanılması, blok içeriğinin ne olacağını ayrı bir yeniden kullanılabilir şablona ayırmaya karar verdiğiniz anlamına gelir. (Eğer bir 'kısmi', eğer yapacaksan). Bu şablon için veri içeriği, blokta yer alacağı ile aynı olacaktır.

Özel olarak, {{include}} {{if}} ve {{else}} etiketleri veri içeriğini taşımaz, ancak {{for}} ve {{props}} yapar. siz karar verebilirsiniz özel etiketleri ... ile

Yani sizin durumda size <input type="text" data-link="Company^Name" /> yerine <input type="text" data-link="Name" /> kullanacağı başvuru {^{for Company tmpl=.../}} veya {{include tmpl=.../}} ancak ikinci durumda diğer şablon ya kullanabilirsiniz. İşte

ilgili bazı bağlantılar şunlardır:

• http://www.jsviews.com/#samples/jsr/composition/tmpl
• http://www.jsviews.com/#includetag
• http://www.jsviews.com/#fortag

Answer 2

Bunu başarmanın bir yolunu keşfettim. İlk başta karmaşık görünebilir, ama doğru anladıktan sonra mantıklı olacaktır.

(Not:.. Böyle bir örnek sadece bu konuda blog olabilir olsaydı):

<script type="text/x-jsrender" id="CompanyFormTemplate"> 
    <form> 
     {^{for Company tmpl="#CompanyDetailsTemplate" /} 
    </form> 
</script> 

<script type="text/x-jsrender" id="CompanyDetailsTemplate"> 
    <input type="text" data-link="Name" /> 
</script> 

Javascript: Yukarıdaki koddan değişiklik yapılmasına gerek yoktur

HTML İşaretleme. Tamam

---

Dediğim şekilde, çözüm karmaşık görünebilir ama gerçekten yapmak zorunda Tüm Şirket konu ile ilgili ilk bağlayıcı verileri kurulumu oldu çıkıyor ve sonra mülkiyet nesneleri var etmek. Daha zarif bir çözümün (yani, bunların hepsinin tek bir şablonda gerçekleştirilebildiği bir çözüm) olup olmadığını merak ediyorum; ancak bu çözüm, hem ana nesnenin hem de özelliklerinin üzerinde veri bağlamanın gerçekleşmesini sağlar.

Bu çözüm için bir JsFiddle gönderdim, bu nedenle bu sorun karşısında birileri gelip bu çözümün kendi problemleri için nasıl çalışacağını anlamak isterse, çalışan bir çözümle oynayabilecekler.