14

クライアント側のコードに何らかの構造を追加しようと考えており、knockout.js. 私はドキュメントを読んでいて、簡単な質問があります-ノックアウトではユーザーがdata-bindhtml要素に属性を追加する必要があるdjangoため、現在私が使用しているため、フォームを操作するための最良の方法は何ですか?{{ form.as_p }}

どのように、どこでフォームの入力を行うべきかview model(Django のフォーム フィールドにある場合、または{{ form.as_p }}代わりに html を没収して入力する場合) に興味があります。

4

2 に答える 2

19

ウィジェットを使用して、フォームのメタ定義のフィールドにカスタム属性を追加できます。

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 アドオンや css スタイリングに役立ちます)。

    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
于 2012-05-01T20:28:10.563 に答える
1

もう1つの方法は、django-crispy-formsを使用して、レイアウト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 %}

と出来上がり。

Cripsy-formsはそれよりもさらに強力で、独自のレイアウトテンプレートなどを定義できます。

于 2013-03-14T23:24:11.680 に答える