SORU
9 EKİM 2011, Pazar


KnockoutJS sayılar için biçimlendirme kuralları

Ondalık sürü sayılar bir grup ile bir viewModel var. Eğer benim bağlamaları şöyle:

    <tr>
        <td data-bind="text: Date"></td>
        <td data-bind="text: ActualWeight"></td>
        <td data-bind="text: TrendWeight"></td>
    </tr>

Sonra, tabii ki, çıkış ondalık basamağı vardır ve çok okunamaz. Bağlamaları bu sorunu çözer, ama çok ayrıntılı gibi görünüyor, değişen ve "": . gürültülü

    <tr>
        <td data-bind="text: Date"></td>
        <td data-bind="text: ActualWeight().toFixed(1)"></td>
        <td data-bind="text: TrendWeight().toFixed(1)"></td>
    </tr>

Not, bu küçük parçacık ve eklemek zorunda .(1) Her yere bağlama ben toFixed daha dağınık burada gösterilen olandan işaretleme yol açar.

Sayılar dışında her şey için, ağır basan olabilirdi bana çıktı nasıl göründüğünü kontrol etmek için etkili bir yol olmuştur. Nakavt sonra, benim sayfa için merkezi bir şekilde anlatmak için bir yol üzerinde herhangi bir öneriniz çıktı eklenmeden önce dizelere numaraları dönüştürmek için kullanmak için hangi fonksiyon?

Bu konuda, genel amaçlı bir değeri her türlü format nasıl nakavt anlatmak için bir yol bulunması faydalı olurdu gibi geliyor. Geçersiz Tarih.prototip.olabilirdi çalışıyor ama biraz ağır diğer kullanımları etkisi Mayıs ayından bu yana teslim hissediyor .sadece nakavt ayrıca sağlar.

CEVAP
9 EKİM 2011, Pazar


Böyle bir durumun üstesinden gelmek için pek çok yol bir çift vardır. Ya bağlamaları adres veya Görünüm modelinizi göndermek için seçebilirsiniz.

Eğer görüşünü modeli tarafından oluşturulan eşleme eklentisi ve yakalanmak istemezsin içine özelleştirme yolu, onu yarattı, sonra kullanmayı düşünün bir özel bağlama bu bir anlamda metin bağlama kolu biçimlendirme.

Bir şey gibi (http://jsfiddle.net/rniemeyer/RVL6q/):

ko.bindingHandlers.numericText = {
    update: function(element, valueAccessor, allBindingsAccessor) {
       var value = ko.utils.unwrapObservable(valueAccessor()),
           precision = ko.utils.unwrapObservable(allBindingsAccessor().precision) || ko.bindingHandlers.numericText.defaultPrecision,
           formattedValue = value.toFixed(precision);

        ko.bindingHandlers.text.update(element, function() { return formattedValue; });
    },
    defaultPrecision: 1  
};

Kesinlikle olması mümkün oluşturmak için bir daha genel bağlama (formattedText) bunu da kontrol değeri ve biçimlendirilmiş kullanarak bazı geçersiz kılınabilir varsayılan ya da ülkeye geçişte bazı biçimlendirme seçenekleri ({ type: "numeric", precision: 2 }).

Senaryonuz için, ilk seçeneği iyi bir seçim olabilir gibi geliyor. Görünüm modelinizi göndermek istiyorsanız ancak, daha sonra bir biçimlendirilmiş ve değer ham versiyonu hem de veren özel bir gözlemlenebilir oluşturabilirsiniz.

(http://jsfiddle.net/rniemeyer/fetBG/) gibi bir şey olabilir:

function formattedNumericObservable(initialValue, precision) {
    var _raw = ko.observable(initialValue),
        precision = precision || formattedNumericObservable.defaultPrecision,        
        //the dependentObservable that we will return
        result = ko.dependentObservable({
            read: function() {
               return _raw().toFixed(precision); 
            },
            write: _raw
        });

        //expose raw value for binding
        result.raw = _raw;

        return result;   
}

Şimdi myValue myValue.raw karşı bağlama ihtiyaçlarına bağlı olarak, olabilir. Aksi halde, Çevir ve varsayılan olarak ham değerini döndürür ve formatted bir dependentObservable şeylere maruz kalabilirsin. Böyle bir nesneyi JSON dönüştürüldüğünde, herhangi kaybedecektir "alt observables" eğer bu veri göndermek istiyorsanız, bu yüzden geri planda olabilecek bir sunucu için.

Yine daha genel ve biraz bilgi alır formattedObservable hakkında bir biçimi nesne oluşturabilirsiniz.

Son olarak, 1.3 beta sunar extenders API. Yukarıdaki gibi benzer bir şey yapabilirsin: (http://jsfiddle.net/rniemeyer/AsdES/)

ko.extenders.numeric = function(target, precision) {
    var result = ko.dependentObservable({
        read: function() {
           return target().toFixed(precision); 
        },
        write: target 
    });

    result.raw = target;
    return result;
};

O zaman, gibi bir gözlemlenebilir uygulayın: var myValue = ko.observable(1.223123).extend({numeric: 1});

Extender da sadece dependentObservable kendisini döndürmek yerine target 17 *dependentObservable eklemek olabilir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Andytokkallos

    Andytokkallo

    27 Kasım 2007
  • Dave Wallace

    Dave Wallace

    27 Kasım 2007
  • Friday NightFort

    Friday Night

    15 EYLÜL 2011