KnockoutJS şablonlarında hata ayıklama sorunları ile sorun yaşamaya devam ediyorum.
Diyelim ki " items" adlı bir özelliğe bağlamak istiyorum ama şablonda bir yazım hatası yapıyorum ve (mevcut olmayan) özelliğe " item" bağlanıyor .
Chrome hata ayıklayıcısını kullanmak yalnızca şunu söyler:
"item" is not defined.
Bağlama sorunu hakkında daha fazla bilgi edinmeme yardımcı olan araçlar, teknikler veya kodlama stilleri var mı?
Yanıtlar:
Belirli bir kapsamda hangi verilerin mevcut olduğu ile ilgili bir sorun olduğunda oldukça sık yaptığım bir şey, şablonu / bölümü aşağıdaki gibi bir şeyle değiştirmektir:
<div data-bind="text: ko.toJSON($data)"></div>Veya biraz daha okunabilir bir sürüm istiyorsanız:
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>Bu, o kapsamda bağlanan verileri tükürecek ve işleri uygun şekilde iç içe yerleştirdiğinizden emin olmanızı sağlayacaktır.
Güncelleme: KO 2.1'den itibaren , aşağıdakileri basitleştirebilirsiniz:
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>Şimdi argümanlar aktarılıyor JSON.stringify.
namegözlenebilir bir şey yapıyorname.subscribe(function(newValue) { console.log("name", newValue); });
foreachsenaryoda olduğu gibi öğelerimin yanındaki verileri görmek istiyorum ve ilgili işlenmiş biçimlendirme içindeki sayfada konsolu gözden geçirmekten daha kolay görüyorum. Sadece duruma bağlı. Burada daha fazla düşüncelerim var: knockmeout.net/2013/06/… . Ayrıca, bağlanma gibi "temiz" bir sürümünü günlüğe kaydetmek isteyebilirsiniz console.log(ko.toJS(valueAccessor()).
Chrome'u geliştirme için kullanıyorsanız , bağlama araçlarını doğrudan Geliştirici Araçları Öğeleri panelinde gösteren, Knockoutjs bağlam hata ayıklayıcısı adı verilen gerçekten harika bir uzantı (bağlı olmadığım) var .
JavaScript kitaplık dosyalarınızda bir yerde bir bağlamaHandler tanımlayın .
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};sadece kullanmaktan hoşlanır:
<ul data-bind="debug: $data">Avantajları
Yararlı olabilecek başka bir tane buldum. Bazı ciltlemeler hata ayıklama ve Ryans örnek kullanmayı denedim. JSON dairesel bir döngü bulduğunda bir hata aldım.
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>Ancak, bu yaklaşımı kullanarak veri bağlama değeri aşağıdakilerle değiştirildi:
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: 'click me', click: function() {debugger}"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>Şimdi krom hata ayıklama penceresi açıkken PRE öğesini tıklarsam, güzel doldurulmuş bir kapsam değişkenleri penceresi alırım.
Bunun için biraz daha iyi bir yol buldum:
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>>=, Chrome Geliştirici Araç Çubuğu'nun sol alt tarafındaki simgeyi tıklayarak veya Chrome Geliştirici Araç Çubuğu'ndaki "Konsol" sekmesini açarak veya Ctrl+ Shift+ tuşlarına basarak erişebilirsiniz.Jko.dataFor($0)ko.contextFor($0)
Bu hile, Chrome'un 0-4 $ arası özelliği ve KnockoutJS'nin yardımcı yöntemlerinin bir kombinasyonudur . Kısacası, Krom Chrome Geliştirici Araç Çubuğu seçtiğiniz hangi unsurlar hatırlar ve takma altında bu öğeleri ortaya $0, $1, $2, $3, $4. Dolayısıyla, tarayıcınızdaki bir öğeye sağ tıklayıp 'Öğeyi incele' seçeneğini belirlediğinizde, bu öğe otomatik olarak takma ad altında kullanılabilir hale gelir $0. Bu numarayı KnockoutJS, AngularJS, jQuery veya başka herhangi bir JavaScript çerçevesi ile kullanabilirsiniz.
Hilenin diğer tarafı KnockoutJS'nin ko.dataFor ve ko.contextFor yardımcı yöntemleri:
ko.dataFor(element) - öğeye bağlanmak için mevcut olan verileri döndürürko.contextFor(element) - DOM öğesi tarafından kullanılabilen tüm bağlama bağlamını döndürür.Unutmayın, Chrome'un JavaScript Konsolu tamamen işlevsel bir JavaScript çalışma zamanı ortamıdır. Bu, yalnızca değişkenlere bakmakla sınırlı olmadığınız anlamına gelir. ko.contextForViewmodelin çıktısını depolayabilir ve doğrudan konsoldan değiştirebilirsiniz. Deneyin var root = ko.contextFor($0).$root; root.addContact();ve neler olduğunu görün :-)
Mutlu hata ayıklama!
Kullandığım gerçekten basit bir şeye göz atın :
function echo(whatever) { debugger; return whatever; }Veya
function echo(whatever) { console.log(whatever); return whatever; }Sonra html'de, diyelim ki:
<div data-bind="text: value"></div>Sadece yerine
<div data-bind="text: echo(value)"></div>Daha ileri:
function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }
<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>Zevk almak :)
GÜNCELLEME
Bir başka can sıkıcı şey, tanımlanmamış bir değere bağlanmaya çalıştığınızda. Yukarıdaki örnekte veri nesnesinin sadece {} değil {değer: 'bazı metinler "} olduğunu düşünün. Bu durumda başınız belada olacak, ancak aşağıdaki tweak ile iyi olacaksınız:
<div data-bind="text: $data['value']"></div> Bu hataları görselleştirmeye yardımcı olmak için knockthrough.js adlı bir github projesi oluşturdum.
https://github.com/JonKragh/knockthrough
Bağlama hatalarını vurgular ve bu düğümde datacontext dökümü verir.
Burada bir örnekle oynayabilirsiniz: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
Beni bu noktaya getirmek için SO'daki mükemmel Nakavt kod örnekleri için RP Niemeyer'e teşekkür ederiz.
Hangi verilerin ciltlemeye aktarıldığını görmenin en kolay yolu , verileri konsola bırakmaktır:
<div data-bind="text: console.log($data)"></div>Nakavt, metin ciltleme değerini değerlendirir ( burada herhangi bir ciltleme kullanılabilir ) ve konsol tarayıcı paneline $ verilerini temizler.
Diğer tüm cevaplar harika olacak, sadece yapmak istediğimi ekliyorum:
Görüşünüze göre (zaten bir ViewModel bağladığınızı varsayarsak):
<div data-bind="debugger: $data"></div>Nakavt kodu:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}Bu, hata ayıklayıcıdaki kodu duraklatacak elementve valueAccessor()değerli bilgiler içerecektir.
Visual studio ve IE geliştiriyorsanız data-bind="somebinding:(function(){debugger; return bindvalue; })()"ben bunu daha çok daha sonra yankı fonksiyonu gibi tüm bağlamalar ile senaryoya gidecek çünkü eval dosyası ve sadece $ context $ verilere (ben kullanmak bunu Chrome'da da);