Question

我只有代码组件，我在其中生成菜单，在那里我获得了大约700条记录，其中所有这些记录都是一次加载的。我决定重新创建它，并在点击事件中将另一个菜单对象加载到菜单。

这是我的菜单的viewmodel，我从viewmodel中删除了一些不相关的部分

public class CategoryMenuViewModel : DotvvmViewModelBase
{
    public static CategoryMenuFacade MenuFacade { get; private set; }

    public static List<CategoryMenuDTO> CategoryMenuList { get; set; } = new List<CategoryMenuDTO>();
    //private static bool LoadMoreCategories { get; set; }

    public CategoryMenuViewModel(CategoryMenuFacade categoryMenuFacade)
    {
        MenuFacade = categoryMenuFacade;
    }

    public override Task PreRender()
    {
        if (!Context.IsPostBack)
        {
            CategoryMenuList.AddRange(CategoryMenuFacade.GetCategoryMenu(CategoryId));
            //CategoryMenuList = MenuFacade.GetCategoryMenu();
        }

        return base.PreRender();
    }

    public static int? CategoryId { get; set; }
    public static List<int> PreviousCategoryId { get; set; } = new List<int>();

    [AllowStaticCommand]
    public static List<CategoryMenuDTO> SelectedCategory()
    {

        if (CategoryId == null) return CategoryMenuList;
        bool idExist = PreviousCategoryId.Any(r => r == CategoryId);
        if (!idExist)
        {
            PreviousCategoryId.Add((int)CategoryId);
            CategoryMenuList.AddRange(MenuFacade.GetCategoryMenu(CategoryId));
        }
        return CategoryMenuList;
    }
}

我以前的想法是我可以使用这个脚本加载菜单的其他部分，我在其中获取我点击的对象ID并将其发送到viewmodel。它工作正常，但这种方法的问题是，它触发PreRender()方法并从另一个视图模型再次加载所有数据。

dotvvm.events.beforePostback.subscribe(function (data) {
try {
    var selectedCategory = $(event.target.lastChild);
    var nodeId = selectedCategory[0].attributes.Id.nodeValue;
    var idNumber = nodeId.substring(nodeId.indexOf("_") + 1);
    data.viewModel.CategoryMenuViewModel().CategoryId = idNumber;

} catch (error) {
    // continue with error
}});

我的另一个想法是关于使用knockout binding handler我可以在viewModel中更新我的CategoryId属性，但我不确切地知道，我如何在viewModel甚至{{1}中触发我的某个方法提交新数据。

code-only-component

这是我的观点

ko.bindingHandlers["click"] = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    $(element)
        .on('click', function (e) {
            var selectedCategory = $(e.target.lastChild);
            var nodeId = selectedCategory[0].attributes.Id.nodeValue;
            var idNumber = parseInt(nodeId.substring(nodeId.indexOf("_") + 1));
            //data.viewModel.CategoryMenuViewModel().CategoryId = idNumber;
            // if someone deletes the value from the textbox, set null to the viewmodel property
            var prop = valueAccessor();

            if (ko.isObservable(prop.CategoryItemId)) {
                prop.CategoryId(idNumber);
            }

        });
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    // get the value from the viewmodel
    var value = ko.unwrap(valueAccessor());
    var test = viewModel.CategoryId();
}};

和<cc:CategoryMenu DataContext="{{value: CategoryMenuViewModel}}" class="categorieMenu" ID="mainMenu"/>档案

.dotcontrol

我的<coc:CategoryMenu DataSource="{{value: CategoryMenuViewModel.CategoryMenuList}}" ActiveCategory="{{controlProperty: ActiveCategory}}" SelectedValue="{{value: CategoryMenuViewModel.CategoryId}}" ItemValueBinding="{{value:Id}}" data-bind="click: {CategoryId}" Click="{{staticCommand: CategoryMenuViewModel.SelectedCategory()}}"/>

中的属性的简短预览

coc

所以我的问题是，如何处理已更改的事件以触发方法，该方法将加载我菜单的其他部分并使用我的组件呈现它？

DotVVM - 如何使用coc

0 个答案: