django रूपों के साथ knockout.js का उपयोग कर?

Question

मैं अपने क्लाइंट साइड कोड में कुछ संरचना जोड़ना चाहता हूं और knockout.js पढ़ रहा हूं। मैं दस्तावेज पढ़ रहा हूं और पूछने के लिए एक सरल सवाल है - चूंकि नॉकआउट के लिए उपयोगकर्ता को data-bind एचटीएमएल तत्वों में विशेषताओं को जोड़ने की आवश्यकता होती है, django रूपों के साथ काम करने का सबसे अच्छा तरीका क्या है, क्योंकि वर्तमान में मैं {{ form.as_p }}

का उपयोग कर रहा हूं

मैं उत्सुक हूँ कि कैसे और कहाँ मैं (फार्म चाहिए के view model को इनपुट अगर यह Django में प्रपत्र फ़ील्ड्स में है, या {{ form.as_p }} जब्त और बदले html में बाहर लिखें।

Answer 1

आप कस्टम में अपने क्षेत्रों विशेषताएँ जोड़ सकते हैं विगेट्स के साथ प्रपत्र की मेटा परिभाषा।

class SomeForm(forms.ModelForm): 
    class Meta: 
     model = SomeModel 
     widgets = {'field_name1': forms.Textarea(attrs={'data-bind':'value: field1'}), 
        'field_name2': forms.TextInput(attrs={'data-bind':'value: field2'})} 

उदाहरण के लिए, पहले क्षेत्र प्रदान किया जाएगा:

<textarea id="id_field_name1" name="field_name1" data-bind="value: field1"></textarea> 

अद्यतन: एक बोनस के रूप में यहाँ एक आसान तरीका उदाहरण के लिए, एक रूप में हर क्षेत्र के लिए एक विशेषता बदलने के लिए है अगर वे सभी की जरूरत एक विशिष्ट वर्ग (अन्य js एडऑन या सीएसएस स्टाइल के लिए उपयोगी)

def __init__(self, *args, **kwargs): 
     super(SomeForm, self).__init__(*args, **kwargs) 
     for name, field in self.fields.items(): 
      field.widget.attrs['class'] = 'some_form_field' 
      # this could be used in your case if the Django field name is the 
      # same as the KO.js field name 
      field.widget.attrs['data-bind'] = 'value: %s' % name 

Answer 2

एक और तरीका है django-crispy-forms का उपयोग करें और layout में data-bind विशेषताएं निर्धारित करने के लिए है:

def __init__(self, *args, **kwargs): 
    super(SomeForm, self).__init__(*args, **kwargs) 
    self.helper = FormHelper() 
    self.helper.layout = Layout(
     Div('field_1', 
      Field('field_2', data_bind='value: field_2')), 
     HTML("{% if success %} <p data-bind="css: { success: success_flag }">Operation was successful</p> {% endif %}"), 
    ) 

फिर टेम्पलेट में आप केवल कार्य करें:

{% crispy form form.helper %} 

और देखा।

क्रिप्स-फॉर्म इससे भी अधिक शक्तिशाली है और आपको अपने layout templates आदि को परिभाषित करने की अनुमति देता है