0

最初我有 3 个列表：类别、子类别和带有复选框的项目。我已经设法将这些列表与 Breeze、Knockout 和 EF5 绑定在一起。

在用户检查一个项目后，我必须创建另一个包含选定项目的列表。我找不到存储和绑定这些数据的方法。任何帮助将不胜感激。谢谢。

视图模型

(function (root) {
var app = root.app;
var dataservice = app.dataservice;

function viewModel() {
    var self = this;
    this.category = ko.observableArray();
    this.errorMessage = ko.observable("");
    this.subCategories = ko.observableArray();
    this.Items = ko.observableArray();
    this.UserItems = ko.observableArray();
    this.Id = ko.observable();

    this.loadSubCategories = function (data, event) {
        dataservice.getSubCategories(self.subCategories, this.Id);
        $('#ulCat').find('li').each(function (i, obj) {
            var cur = $(this);
            cur.attr('class', '');
        });
        $(event.target).parent().attr('class', 'active');
    };

    this.loadItems = function (data, event) {
        dataservice.getItems(self.Items, this.Id);
        $('#ulSubcat').find('li').each(function (i, obj) {
            var cur = $(this);
            cur.attr('class', '');
        });
        $(event.target).parent().attr('class', 'active');
    };

    return this;
};

var vm = new viewModel();

dataservice.getAllCategories(vm.category);

app.categoryViewModel = vm;

数据服务

var EntityQuery = breeze.EntityQuery;
var FilterQueryOp = breeze.FilterQueryOp;
var Predicate = breeze.Predicate;

// service name is route to our Web API controller
var serviceName = 'breeze/Category';

// manager is the service gateway and cache holder
var manager = new breeze.EntityManager(serviceName);

// add members to the dataservice
var dataservice = {
    getAllCategories: getAllCategories,
    getSubCategories: getSubCategories,
    getItems: getItems
};

// extend the app with this dataservice
app.dataservice = dataservice;

/* Private functions */

function getAllCategories(categoryArray) {
    var query = new EntityQuery
            .from("FoodCategories")
            .orderBy("Name");

    logger.info("querying for all categories");
    return manager
        .executeQuery(query)
        .then(function (data) {
            //return data.results;
            processResults(data, categoryArray);
        })
        .fail(queryFailed);
};

function getSubCategories(subCategoryArray, categoryId) {
    var query = new EntityQuery
            .from("FoodSubCategories").where("CategoryId", "==", categoryId)
            .orderBy("Name");

    logger.info("querying for all subCategories");
    return manager
        .executeQuery(query)
        .then(function (data) {
            processResultsSub(data, subCategoryArray);
        })
        .fail(queryFailed);
};

function getItems(itemArray, subCategoryId) {
    var query = new EntityQuery
            .from("Menus").where("SubCategoryId", "==", subCategoryId).expand("UnitMaster")
    .orderBy("Name");

    logger.info("querying for all items");
    return manager
        .executeQuery(query)
        .then(function (data) {
            processResultsItem(data, itemArray);
        })
        .fail(queryFailed);
};


function processResults(data, categoryArray) {
    var categories = data.results;
    logger.success("queried all categories");
    categoryArray.removeAll();
    categories.forEach(function (category) {
        categoryArray.push(category);
    });
};


function processResultsSub(data, subCategoryArray) {
    var subCategories = data.results;
    logger.success("queried all subCategories");
    subCategoryArray.removeAll();
    subCategories.forEach(function (subCategory) {
        subCategoryArray.push(subCategory);
    });
};

function processResultsItem(data, itemArray) {
    var items = data.results;
    logger.success("queried all itmes");
    itemArray.removeAll();
    items.forEach(function (item) {
        itemArray.push(item);
    });
};

HTML

<div class="conttab1">
                    <h2>Category</h2>
                    <div class="catogeryLink">
                        <ul id="ulCat" data-bind="foreach: category">
                            <li id="liCategory" data-bind="click: $root.loadSubCategories">
                                <input id="hfCategoryId" type="hidden" data-bind="value: Id" />
                                <a data-bind="text: Name"></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-------------------- Sub Category-------------------->
                <div class="conttab2">
                    <h2>Sub Category</h2>
                    <div class="catogeryLink">
                        <ul id="ulSubcat" data-bind="foreach: subCategories">
                            <li id="liSubCategory" data-bind="click: $root.loadItems">
                                <input id="hfSubCategoryId" type="hidden" data-bind="value: Id" />
                                <a data-bind="text: Name"></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-------------------- Items -------------------->
                <div class="conttab3">
                    <div class="resulttab">
                        <h2>Menu Items</h2>
                        <table style="width: 100%;">
                            <tbody data-bind="foreach: Items">
                                <tr style="border-bottom: 1px solid #808080; padding: 2px 0 2px 0;">
                                    <td style="vertical-align: middle; width: 80%;">
                                        <div class="leftsidediv">
                                            <input type="checkbox" data-bind="title: Name, attr: { id: $index() }" /><label for="" data-bind="    html: Name, attr: { for: $index() }"></label>
                                            <input id="hfItemId" type="hidden" data-bind="value: ItemId" />
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <div>
                                            <select id="ddlQuantity" class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                    </td>
                                    <td style="vertical-align: middle;">
                                        <div style="float: left;">
                                            &nbsp;<span data-bind="html: UnitMaster.Name"></span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <!-------------------- User Items -------------------->
                    <div class="resulttab">
                        <h2>Selected Items</h2>
                        <table style="width: 100%;" id="userTable">
                            <tbody data-bind="foreach: UserItems">
                                <tr style="border-bottom: 1px solid #808080; padding: 2px 0 2px 0;">
                                    <td style="vertical-align: middle; width: 70%;">
                                        <div class="leftsidediv">
                                            <span data-bind="html: ItemName" />
                                            <input id="Hidden1" type="hidden" data-bind="value: ItemId" />
                                        </div>
                                    </td>
                                    <td style="width: 15%;">
                                        <div>
                                            <select id="ddlUserQuantity" class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                    </td>
                                    <td style="vertical-align: middle;">
                                        <div>&nbsp;<span data-bind="html: UnitMaster.Name"></span></div>
                                    </td>
                                    <td style="vertical-align: middle;">
                                        <div>&nbsp;<a><img src="images/btn_iconDelete.gif" /></a></div>
                                    </td>
                                </tr>
                            </tbody>
                            <tr>
                                <td colspan="4">
                                    <input id="Text1" type="text" placeholder="Extra note to cook..." width="90%" /></td>
                            </tr>
                        </table>

图 我的前三个列表通过微风成功绑定但我被困在选定项目列表中。 我想纯粹在服务器端工作的结果

4

1 回答 1

0

更新您的dataservice.js。在页面加载时加载所有子类别，如下所示。

var _allsubcategoriesLoaded = false;
function getAllSubCategories(subCategoryArray, categoryId) {
var query = new EntityQuery.orderBy("Name");
logger.info("querying for all subCategories");
return manager
    .executeQuery(query)
    .then(function (data) {   
       _allsubcategoriesLoaded = true;
       })
    .fail(queryFailed);
 };

现在更新您的方法getSubCategories

function getSubCategories(subCategoryArray, categoryId) {
var query = new EntityQuery
        .from("FoodSubCategories").where("CategoryId", "==", categoryId)
        .orderBy("Name");

logger.info("querying for all subCategories");
 if(_allsubcategoriesLoaded){
   return manager.executeQueryLocally(query).then(function (data) {
           processResultsSub(data, subCategoryArray);
     }).fail(queryFailed);
   };
 }else{
return manager.executeQuery(query).then(function (data) {
        processResultsSub(data, subCategoryArray);
    }).fail(queryFailed);
 };}

您可以重构此方法以使其更小且易于阅读。希望对你有帮助

于 2013-11-12T13:36:42.107 回答