Ractive.js'yi kullanarak, seçili bir seçim kutusunun seçimini nasıl yaparsınız?

Question

Ractive.js v0.7.3 kullanıyorum ve bir seçim kutusunun seçimini iptal etme ihtiyacım var ancak bunu nasıl yapılacağını Ractive belgesinde bulamıyorum. İlk seçenek boş

benim seçme yılında

(değeri yoktur ve "Seç ..." diyor), bu yüzden şöyle null değeri ayarı çalıştı: hatta

rjs.set('selected.' + cfg.nodeType + '.id', null); 

ve ona doğruladıktan yaparak değerinin güncellenmesi önce ve sonra aşağıdaki: doğru önce kimliği ve sonrasında null adlı, ama yine de kullanıcı arayüzünde seçilen olarak görüntülenen önceki değer döndürdü

var test = rjs.get('selected.' + cfg.nodeType + '.id'); 

.

Ben jQuery aşağıdaki kullanarak sona erdi:

function resetMenu(cfg) { 
    $('#' + cfg.nodeType + 'Select').attr('selectedIndex', -1) 
     .find('option:selected').prop('selected', false); 
} 

ama sonra yeni sayfaya geçtiğinizde, ractive 'yeniden seçerek' eski seçimi. Bu yüzden, Ractive'in değişimden haberi olmadığını düşündüğüm şu düşünceyi ekledim, ancak Ractive hala seçilmiş olan değeri yeniden 'seçer'.

function resetMenu(cfg) { 
    $('#' + cfg.nodeType + 'Select').attr('selectedIndex', -1) 
     .find('option:selected').prop('selected', false); 

    if (rjs) { 
     rjs.update('navList.' + cfg.nodeType); 
    } 
} 

ben seçeneğin kaldırılması ractive kullanabilir, bu ideal olacağını düşünüyorum, ama seçkin bir seçeneğin kaldırılması nasıl Ractive.js belgelerinde bulamıyorum.

Answer 1

Güncelleme: ractive içinde hata düzeltildi

. Kenar sürümünde (v0.8.0), şimdi ractive.set() herhangi bir değer olabilir ve eşleşen bir seçenek yoksa, hiçbir şey seçilemez.

Orjinal cevap:

set değerini eşleşen hiçbir seçenek varsa, ractive ilk seçeneği seçecektir. Seçim her güncellendiğinde bu olur. Ben bir hata olduğuna inanıyorum ve GitHub bir konuda dosya açtı.

{{selected}}<br> 

<select value="{{selected}}" decorator="unselect: {{selected}}"> 
    <option>1</option> 
    <option>2</option> 
</select> 

var ractive = new Ractive({ 
    el: 'body', 
    template: '#template', 
    data: { selected: null }, 
    decorators: { 
    unselect: function (select, value) { 
     // use ractive.set('selected', null) in your code to unselect 
     if (value === null) { 
     select.selectedIndex = -1; 
     this.updateModel(); 
     } 

     return { 
     teardown: function() {} 
     } 
    } 
    } 
}); 

Demo: Verdiğiniz cevap sizin için işe yaramazsa https://jsfiddle.net/xubo91oh/