नॉकआउट एक विदित मॉडल संपत्ति

Question

मैं इस तरह दृश्य मॉडल की एक संपत्ति के लिए एक divs सीएसएस वर्ग के लिए बाध्य करना चाहते हैं सीएसएस वर्ग बाध्यकारी:

<div id="statusIndicator" data-bind="css: selectedPriority"> 

लेकिन इस परिणाम उत्पन्न करता है:

<div id="statusIndicator" class=" 0 1 2 3"> 

myViewModel = { 
    selectedPriority: ko.observable('High'), 
    Company: ko.observable("Bert"), 
    Rows: ko.observableArray([ 
     new row(), 
     new row(), 
     new row() 
    ]), 
    Tabs: ['High', 'Medium', 'Low'], 

    selectPriority: function (tab) { 
     this.selectedPriority(tab); 
    } 
}; 

तो जब मैं पृष्ठ मैं चाहता हूँ div होने के लिए इस दृश्य मॉडल का उपयोग करता है लोड: यह दृश्य मॉडल है

<div id="statusIndicator" class="High"> 

मैं क्या गलत कर रहा हूं?

Answer 1

इस स्थिति के लिए आप कर सकते हैं::

<div data-bind="attr: { 'class': selectedPriority}"> 

http://knockoutjs.com/documentation/css-binding.html

आप कुछ इस तरह नहीं कर सकते

इस विधि का एकमात्र नकारात्मक पक्ष यह है कि यह क्लास को चालू या बंद टॉगल करने के बजाय सीधे कक्षा सेट करेगा, इसलिए यदि आप एकाधिक कक्षाओं का उपयोग कर रहे हैं, तो selectedPriority होगा कक्षाओं की पूरी सूची रखने की आवश्यकता है।

Answer 2

लग रहा है कि आप अपने मॉडल से सीधे एक वर्ग सेट नहीं कर सकता की तरह:

<div data-bind="css: { high: selectedPriority() == 1, medium: selectedPriority() == 2}"> 

Answer 3

@Chris Jaynes द्वारा टिप्पणी में की ओर संकेत किया है, Knockout 2.2.0 सेटिंग वर्ग नामों आसान, के रूप में नॉकआउट लेखक स्टीव सैंडरसन द्वारा एक ब्लॉग पोस्ट में विस्तृत बनाता है।

http://blog.stevensanderson.com/2012/10/29/knockout-2-2-0-released/

पोस्ट के अनुसार:

हम भी कुछ विशेषताओं के कार्य और अधिक की तरह आप हमेशा लगा कि वे काम करना चाहिए हो सकता है बनाया है। उदाहरण के लिए, सीएसएस बाध्यकारी अब तत्वों (पहले, यह पूर्वनिर्धारित सीएसएस वर्ग के नाम टॉगल तक ही सीमित था)

ब्लॉग पोस्ट भी एक jsfiddle आप के लिए साथ खेल सकते हैं शामिल करने के लिए प्रोग्राम के रूप में रूप से जेनरेट CSS वर्ग नाम संलग्न कर सकते हैं कार्रवाई में बाध्यकारी देखें। http://jsfiddle.net/qRmfH/light/

नोट अपने उदाहरण में css बाध्यकारी वाक्य रचना, css: chosenTicketCss है, जो एक computed observable है कि एक सीएसएस वर्ग के नाम देता है:

<p data-bind="visible: chosenTicket, css: chosenTicketCss"> 
    Excellent choice! Suits you perfectly. 
</p>