बैकबोन.जेएस

Question

के साथ Rivets.js में कस्टम बाइंडर का उपयोग करते समय बटन पर "रेडियो" कार्यक्षमता जोड़ना मैं अपने मॉडल में तत्वों को बाध्य करने के लिए Rivets.js का उपयोग कर रहा हूं। मैं डिज़ाइन के लिए ट्विटर द्वारा बूटस्ट्रैप का उपयोग कर रहा हूं, और मान 1, 2 और 3 (कार्यात्मक रूप से रेडियो बटन के बराबर) से चुनने के लिए तीन बटन सेट अप किया है।

मैं इस तरह एक बटन समूह में तीन बटन की स्थापना की है:

<div class="btn-group" id="input_level" data-toggle="model.level"> 
    <button data-toggle-value="1" class="btn active">One</button> 
    <button data-toggle-value="2" class="btn">Two</button> 
    <button data-toggle-value="3" class="btn">Three</button> 
</div> 

मैं बहुत तरह toggle बांधने की मशीन एक कस्टम जोड़ लिया है:

rivets.binders.toggle = function(el,value){ 
    $(el).find('button[data-toggle-value="' + value + '"]') 
     .addClass('active').siblings().removeClass('active'); 
} 

इस तरह यह होना चाहिए बटन राज्य अपडेट हो जाता है, लेकिन दूसरी तरफ काम नहीं करता - यानी बटन क्लिक ईवेंट से कोई घटना नहीं है। मैं इसे Rivets.js में सामान्यीकृत करना चाहता हूं इसलिए मुझे बैकबोन दृश्य में फ़ॉर्म में प्रत्येक बटन समूह में एक क्लिक ईवेंट जोड़ने की आवश्यकता नहीं है।

क्या यह मूलभूत कार्यक्षमता रिवेट्स में है, और यदि हां, तो मैं इसे कैसे सेट अप करूं?

Answer 1

का अध्ययन Rivets.js एनोटेट स्रोत के बाद, मैं कुछ समय के बाद समाधान (मैं CoffeeScript उपयोग नहीं हो रहा है, इसलिए यह एक परेशानी को पढ़ने के लिए का एक सा था):

मैं मूल के इस टुकड़े की जगह मेरे सवाल में कोड:

rivets.binders.toggle = function(el,value){ 
    $(el).find('button[data-toggle-value="' + value + '"]') 
     .addClass('active').siblings().removeClass('active'); 
} 

इस के साथ

:

rivets.binders.toggle = { 
    publishes: true, 
    bind: function(el){ 
     $(el).on('click', 'button:not(.active)', _.bind(function(e){ 
      this.model.set(this.keypath, $(e.currentTarget).data('toggle-value')); 
     }, this)); 
    }, 
    unbind: function(el){ 
     $(el).off('click', 'button:not(.active)'); 
    }, 
    routine: function(el,value){ 
     $(el).find('button[data-toggle-value="' + value + '"]') 
      .addClass('active').siblings().removeClass('active'); 
    } 
}; 

प्रारंभिक कोड rivets.binders.toggle.routine बजाय rivets.binders.toggle में है।