CRUD operation examples for complex and array fields

[Dan]

Hi,

I cant find some examples that involves a CRUD operation with ObservableObject.extend with array fields.

I'm creating a registration page that has two array fields: addresses and phones

01.(function (global) {
02.    var RegistrationViewModel,
03.        app = global.app = global.app || {};
04.
05.    RegistrationViewModel = kendo.data.ObservableObject.extend({
06.        firstname: "",
07.        middleInitial: "",
08.        lastname: "",
09.        nickname: "",
10.        company: "",
11.        userId: "",
12.        password: "",
13.        addresses: [],
14.        phones: [],
15.
16.        onSubmit: function () {
17.            var that = this,
18.                api = "https://www.local.com/api/registration",
19.                regForm = {
20.                    firstname: that.get("firstname").trim(),
21.                    middleInitial: that.get("middleInitial").trim(),
22.                    lastname: that.get("lastname").trim(),
23.                    nickname: that.get("nickname").trim(),
24.                    company: that.get("company").trim(),
25.                    userId: that.get("userId").trim(),
26.                    password: that.get("password").trim(),
27.                    addresses: that.get("addresses"),
28.                    phones: that.get("phones"),
29.                };
30.            $.ajax({
31.               // push to service
32.            });
33.        }
34.    });
35.
36.    app.registrationService = { viewModel: new RegistrationViewModel() };
37.})(window);

My problem is that in my view I want to have a dynamic fields when the user registers they can add, update or remove those items (addresses and phones) before submitting their form.

Here's a snippet of my view:

01.<!-- Registration view -->
02.<div id="registration-sec"
03.     data-model="app.registrationService.viewModel"
04.     data-role="view">
05.    <form>
06.        <h3>Register</h3>
07.        <ul data-role="listview"
08.            data-style="inset">
09.            <li>
10.                <label>
11.                    <span>First name</span>
12.                    <input type="text" data-bind="value: firstname" />
13.                </label>
14.            </li>
15.            <li>
16.                <label>
17.                    <span>Last name</span>
18.                    <input type="text" data-bind="value: lastname" />
19.                </label>
20.            </li>
21.            <li>
22.                <label>
23.                    <span>Middile initital</span>
24.                    <input type="text" data-bind="value: middleInitial" />
25.                </label>
26.            </li>
27.            <li>
28.                <label>
29.                    <span>Nick name</span>
30.                    <input type="text" data-bind="value: nickname" />
31.                </label>
32.            </li>
33.            <li>
34.                <label>
35.                    <span>Company</span>
36.                    <input type="text" data-bind="value: company" />
37.                </label>
38.            </li>
39.            <li>
40.                <label>
41.                    <span>User ID</span>
42.                    <input type="text" data-bind="value: userId" />
43.                </label>
44.            </li>
45.            <li>
46.                <label>
47.                    <span>Password</span>
48.                    <input type="password" data-bind="value: password" />
49.                </label>
50.            </li>
51.        </ul>
52.        <input id="submit-reg-frm"
53.               type="submit"
54.               data-role="button"
55.               data-bind="click: onSubmit"
56.               value="Sign Up"
57.               class="login-button" />
58.    </form>
59.</div>

In my onSubmit() function I can have something like this...

regFrom = {
    // some properties here...
    addresses: that.get("addresses"),
    phones: that.get("phones")
}

I have two questions here...

1. Are there any examples for this kind of scenario where in I can add, update and delete array items from the view?
2. In the view, are there any specific data-role attribute values that I can used to handle this kind of process?

[Daniel]

Hello Dan,

I posted my reply in the support ticket that you have opened on the same topic. For convenience, I am pasting it below:

I can suggest to check this demo. It demonstrates how to use source binding to add and remove records. If editing should be supported as well then you could use value bound inputs in the template. Another option would be to use an editable widget as demonstrated in this demo.

Regards,
Daniel
Telerik