Question

基于KnockoutJS网站（http://knockoutjs.com/examples/cartEditor.html）中的示例，我想做类似的事情。

当您选择类别时，我想检查客户端是否有值，如果没有从服务器获取。上面的示例在客户端有产品，但在我的情况下，我想检查客户端，如果不存在则转到服务器。

任何人都可以向我展示一个例子或任何提示吗？

提前致谢

编辑：

我试过的代码（javascript）：

function getJsonObject(value) {
            return $.parseJSON(value.replace(/&quot;/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>

我尝试使用$ parent，$ data而没有成功......

Answer 1

你仍然会在subscribe处理程序中执行此操作。这是一个伪代码示例：

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

  else
    // make ajax call to get values
});

Answer 2

我写了fiddle，其中服务器调用是按时间模拟的。如您所见，当您选择某个类别时，将从服务器获取子类别并将其分类到类别项目中。因此，当重新选择类别时，不会从服务器获取子类别。

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)


};

我希望它有所帮助。

具有可观察性的Knockout依赖性

2 个答案: