将 knockout.js 与 django 表单一起使用？答案

【问题标题】：using knockout.js with django forms?将 knockout.js 与 django 表单一起使用？
【发布时间】：2013-03-15 07:24:11
【问题描述】：

我希望为我的客户端代码添加一些结构，并且一直在阅读有关 knockout.js 的信息。我一直在阅读文档并有一个简单的问题要问 - 因为淘汰赛要求用户向 html 元素添加 data-bind 属性，所以它使用 django 表单的最佳方式是什么，因为目前我是使用{{ form.as_p }}

我很好奇我应该如何以及在哪里形成对view model 的输入（如果它在 Django 的表单字段中，或者放弃 {{ form.as_p }} 并改为在 html 中输入。

【问题讨论】：

标签： django knockout.js

【解决方案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 插件或 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

【讨论】：

【解决方案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 %}

瞧瞧。

Cripsy-forms 比这更强大，它允许您定义自己的 layout templates 等。

【讨论】：