Back
Element Current view model state

Text

{
    textValue: ,
    textareaValue: ,
    checkboxValue: ,
    radioValue: ,
    checkBoxListValue: [],
    selectValue: ,
    multipleSelectValue: []
}

Text with update on keyup event

Textarea

Checkbox

Radio

Checkbox list

Select

Multiple select

View source code:

<table>
    <tr>
        <th>Element</th>
        <th>Current view model state</th>
    </tr>
    <tr>
        <td>
            <h4>Text</h4>
            <input type="text" data-bind="value: textValue" />
        </td>
        <td rowspan="6">
<pre>
{
    textValue: <span data-bind="text: textValue"></span>,
    checkboxValue: <span data-bind="text: checkboxValue"></span>,
    radioValue: <span data-bind="text: radioValue"></span>,
    checkBoxListValue: [<span data-bind="text: displayCheckBoxListValue"></span>],
    selectValue: <span data-bind="text: selectValue"></span>,
    multipleSelectValue: [<span data-bind="text: displayMultipleSelectValue"></span>]
}
</pre>
        </td>
    </tr>
    <tr>
        <td>
            <h4>Textarea </h4>
            <textarea data-bind="value: textareaValue"></textarea>
        </td>
    </tr>
    <tr>
        <td>
            <h4>Checkbox</h4>
            <input type="checkbox" data-bind="checked: checkboxValue" />
        </td>
    </tr>
    <tr>
        <td>
            <h4>Radio</h4>
            <label><input type="radio" name="fruit" value="Apple" data-bind="checked: radioValue" />Apple</label>
            <label><input type="radio" name="fruit" value="Banana" data-bind="checked: radioValue" />Banana</label>
            <label><input type="radio" name="fruit" value="Orange" data-bind="checked: radioValue" />Orange</label>
        </td>
    </tr>
    <tr>
        <td>
            <h4>Checkbox list</h4>
            <label><input type="checkbox" value="Apple" data-bind="checked: checkboxListValue" />Apple</label>
            <label><input type="checkbox" value="Banana" data-bind="checked: checkboxListValue" />Banana</label>
            <label><input type="checkbox" value="Orange" data-bind="checked: checkboxListValue" />Orange</label>
        </td>
    </tr>
    <tr>
        <td>
            <h4>Select</h4>
            <select data-bind="source: fruits, value: selectValue"></select>
        </td>
    </tr>
    <tr>
        <td>
            <h4>Multiple select</h4>
            <select multiple data-bind="source: fruits, value: multipleSelectValue"></select>
        </td>
    </tr>
</table>

View model source code:

var viewModel = kendo.observable({
    textValue: "Text value",
    textareaValue: "Textarea value",
    checkboxValue: false,
    radioValue: "Apple",
    checkboxListValue: ["Apple"],
    multipleSelectValue: ["Apple"],
    fruits:["Apple", "Banana", "Orange"],
    selectValue: "Apple",
    displayCheckBoxListValue: function() {
        return this.get("checkboxListValue").join(", ");
    },
    displayMultipleSelectValue: function() {
        return this.get("multipleSelectValue").join(", ");
    }
});

kendo.bind($("table"), viewModel);
aspxhtml文档合集 | AspxHtml学习分享网 | ConnectionStrings | 机发库