當複選框值發生變化時，Ractive.js會動態選擇一個Select選項

我有一個複選框來切換狀態 - 給出一個真或假的值。當複選框值發生變化時，Ractive.js會動態選擇一個Select選項

如果該值爲假，我想隱藏選擇框。如果該值爲真，我想顯示選擇框。這是所有工作的「開箱即用」只用一些東西的模板 - 我簡單的做：

 {{#if fooState }} 
    <select class="form-control" id="addFoo" value='{{selectedFoo}}'> 
     <option selected disabled>Select Foo</option> 
     {{#foo}} 
     <option value="{{_id}}|{{title}}">{{title}}</option> 
     {{/foo}} 
    </select> 
     {{/if}}

然而，如果我選擇一個Foo選項...當我設置fooState假此選項保持選中狀態。我想重置這個 - 所以選擇第一個選項（選擇Foo） - 清空{{selectedFoo}}值。

我試着做觀察和事件的東西 - 但不能似乎grok這一點。當我將代碼插入控制檯時 - 我可以更改選擇選項......但似乎無法在狀態更改時觸發它。

來源

2015-07-04 Rob

好的 - 所以我終於明白了......要做到這一點，我不依賴於數據綁定......我創建了一個新的on-change事件並將其添加到select中。

<select class="form-control" id="addFoo" on-change='selectedFoo' > 
    <option></option> 
</select> 

ractive.on('selectedFoo' , function (event) { 
    var resourceArray = event.node.options[event.node.options.selectedIndex].value // Get our selected Foo option 
    resourceArray = resourceArray.split('|') 
    var FooData = { 
    a1: resourceArray[0], 
    a2: resourceArray[1], 
    a3: 'foo' 
    } 
    data.foo.push(resourceData); 
    });

因此，從事件中獲取數據 - 然後手動將其推送到數組上。這是完全獨立的 - 它隻影響這個單一的選擇。現在做我需要的一切。

*磨砂這個......它似乎打破了雙向數據綁定。請參閱上面的*

所以我正在看一個Ractive視頻 - 並有一個頓悟！我是那種刺圍繞在正確的區域 - 但做的一切都是錯誤的：

ractive.on('fooStateToggle', function(event) { 
    console.log(event) 
     if (data.fooState) { 
     // Reset our select box! This took me ****ing ages to figure out... but its so, so, simple! 
     var addFooElem = ractive.nodes.addFoo; 
     addFooElem.selectedIndex = 0; 
    } else { 
    ..... 
    } 
});

所以我需要在複選框被點擊（fooStateToggle）當這樣激發事件添加一些代碼。然後，如果fooState爲真...我們從Ractive節點列表中獲取選擇框（不是dom - 這是虛擬dom，因此直接選擇不起作用），並按索引選擇第一個選項。一個問題......當elem被隱藏時，它不再在ractive.node列表中可用（非常有意義，因爲它不會呈現給頁面），所以你必須儘快將它呈現出來。當它隱藏時，你不能採取行動 - 因爲它不存在。我必須說，我非常喜歡Ractive ......我發現它比React/Angular或其他任何人都快得多。我喜歡它！（這可能會被某人編輯出來 - 但是製作這個的人非常棒，它讓我的開發變得更加輕鬆!!）

來源

2015-07-05 19:53:36 Rob

當複選框值發生變化時，Ractive.js會動態選擇一個Select選項

回答

相關問題