0

Based in the example in KnockoutJS site (http://knockoutjs.com/examples/cartEditor.html) I want to do something similar.

When you select the category I want to check if I have the values in the client, if not get from server. The example above has the products in the client side, but in my case I want to check in client, and if does not exist goes to server.

Anyone can show me an example, or any tip to do that?

Thanks in advance

Edited:

The code I've try (javascript):

function getJsonObject(value) {
            return $.parseJSON(value.replace(/"/ig, '"'));
        }

        var sg = getJsonObject('@ViewBag.SchoolGroups');
        var temp = {
            schoolGroups: sg,
            schoolsBySchoolGroup: undefined,
            getSchools: function (schoolGroupId) {
                alert(schoolGroupId);
                if (this.schoolsBySchoolGroup === undefined) {

                    //get
                }
                else {

                    //verify if exist

                    //if not go to server
                }

                return "something...";
            }
        };    

$(document).ready(function () {

                var CartLine = function () {
                    var self = this;
                    self.schoolGroup = ko.observable(sg[0].Id);
                    self.school = ko.observable();

                    // Whenever the category changes, reset the product selection
                    self.schoolGroup.subscribe(function () {
                        self.school(undefined);
                    });
                };

                var Cart = function () {
                    // Stores an array of lines, and from these, can work out the grandTotal
                    var self = this;
                    self.lines = ko.observableArray([new CartLine()]); // Put one line in by default

                    // Operations
                    self.addLine = function () { self.lines.push(new CartLine()); };
                    self.removeLine = function (line) { self.lines.remove(line) };
                };

                ko.applyBindings(new Cart());
            });

HTML code:

 <table>
                        <thead>
                            <tr>
                                <th>Data de início</th>
                                <th>Agrupamento</th>
                                <th>Escola</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody data-bind='foreach: lines'>
                            <tr>
                                <td>
                                    <input class='required datepicker' />
                                </td>
                                <td>
                                    <select data-bind='options: temp.schoolGroups, optionsText: "Name", optionsValue: "Id", value: schoolGroup'></select>
                                </td>
                                <td data-bind="with: schoolGroup">
                                    <select data-bind='options: temp.getSchools($parent.schoolGroup.Id), optionsText: "Name", optionsValue: "Id", optionsCaption: "Select...", value: $parent.school'></select>
                                </td>
                                <td>
                                    <a href='#' class="none" data-bind='click: $parent.removeLine'><i class="icon-remove"></i></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <a href='#' class="none" data-bind='click: $root.addLine'><i class="icon-plus"></i></a>

I try use $parent, $data with no sucess...

4

2 回答 2

1

You'd still do this in the subscribe handler. Here's a pseudo code example:

self.category.subscribe(function () {
  if (values on client)
    self.product(values on client);

  else
    // make ajax call to get values
});
于 2013-05-20T14:04:34.350 回答
1

I wrote fiddle in which the server call is simulated by a time. As you can see when a category is selected the sub categories are fetched from the server and strored into the category item. So when a category is reselected the sub categories aren't fetched from the server.

var Cat = function (title) {
    var self = this;
    self.subs = ko.observableArray(null);
    self.title = title;
};


var ViewModel = function (cats) {
    var self = this;
    self.selectedCat = ko.observable();
    self.availableCats = cats;
    self.selectedCat.subscribe(function (item) {
        if (item.subs()) {
            self.availableSubCats(item.subs());
        } else {
            serverCall(item.title, function (subCats) {
                item.subs(subCats);
                self.availableSubCats(subCats);
            });
        }

    });

    self.selectedSubCat = ko.observable();
    self.availableSubCats = ko.observableArray();
}


var vm = new ViewModel([new Cat('Cat1'), new Cat('Cat2'), new Cat('Cat3')]);

ko.applyBindings(vm);



var serverCall = function (cat, callback) {

    setTimeout(function () {
        var ar = [];
        for (var index = 0; index < 5 ; index++) {
            ar[index] = cat + ' - ' + index;
        }
        alert('server Call')
        callback(ar);
    }, 1000)


};

I hope it helps.

于 2013-05-20T14:31:30.730 回答