knockoutjs根据viewModel更改mvc按钮操作

本文关键字：按钮 操作 mvc 更改 根据 viewModel knockoutjs | 更新日期: 2023-09-27 18:22:02

我目前正在将knockoutjs与我的一个MVC应用程序一起使用。布局模板如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container-fluid head-content">
        <div class="row">
            <div class="col-xs-6">
                <img class="img-responsive" src="~/Images/logo.jpg" />
            </div>
            <div class="col-xs-3">
                <a class="block" href="#" style="display: none" data-bind="visible: showBack, click: goBack">
                    <div class="block-text">
                        <h4>Back</h4>
                    </div>
                </a>
            </div>
            <div class="col-xs-3">
                <a class="block" href="#" style="display: none" data-bind="visible: showHome, click: navigateToHome">
                    <div class="block-text">
                        <h4>Home</h4>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="container-fluid body-content">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

我的索引部分如下所示：

@Html.Partial("_Login")
@Html.Partial("_Home")
@Html.Partial("_CutLengths")
@Html.Partial("_MoveStock")
@section scripts {
    @Scripts.Render("~/bundles/knockout")
    @Scripts.Render("~/bundles/app")
}

我的问题是，根据我所在的页面，我想使用后退按钮转到另一个页。例如，如果我在cutLengths上，我希望后退按钮将我带到主页。

我的app.viewmodel.js有一个看起来像这样的方法：

// Other operations
self.addViewModel = function (options) {
    var viewItem = {},
        navigator;
    // Add view to AppViewModel.Views enum (for example, app.Views.Home).
    self.Views[options.name] = viewItem;
    // Add binding member to AppViewModel (for example, app.home);
    self[options.bindingMemberName] = ko.computed(function () {
        if (self.view() !== viewItem) {
            return null;
        }
        return new options.factory(self, dataModel);
    });
    if (typeof (options.navigatorFactory) !== "undefined") {
        navigator = options.navigatorFactory(self, dataModel);
    } else {
        navigator = function () {
            self.view(viewItem);
        };
    }
    // Add navigation member to AppViewModel (for example, app.NavigateToHome());
    self["navigateTo" + options.name] = navigator;
};

我想做的是从我当前正在查看的ViewModel中传递一个字符串，当按下后退按钮时，它会将我引导到右侧View Model

有可能做到这一点吗？

我希望我已经解释好了，如果我还没有，请问，我会更努力：D

knockoutjs根据viewModel更改mvc按钮操作

您可以使用ViewData或ViewBag将数据从控制器传递到视图。因此，一种选择是只为当前视图模型和先前视图模型的ViewBag添加一些动态属性。

ViewData是使用字符串作为键存储和检索的对象的字典。

ViewBag使用了C#4中引入的动态功能。它允许对象动态添加属性。我会用它来传递视图模型状态。

两者都不提供编译时检查，这就是它们的美妙之处，您可以添加任何您想要的内容。话虽如此，在ViewBag和ViewData上使用强类型视图模型始终是一种很好的做法。

如果您宁愿在视图模型中放置一些东西，而不是向ViewBag添加属性，也不要在每个视图模型中添加另一个名为PreviousViewModel的属性，并在使用该模型时填充它。

使用ViewBag或ViewData 的示例

ViewData["LastViewModel"] = "CutLengths";
ViewBag.LastViewModel = "CutLengths";

在视图中访问ViewBag是没有问题的，它们具有全局范围。ViewBag就像一个全局变量，你可以将任何东西附加到它上——所以我会明智地使用它们——也许某种类型的单例应用程序管理器会是更好的设计。

希望这能帮助

我现在已经解决了这个问题。首先我更改了HTML

<div class="col-xs-3">
    <a class="block btn-back" href="#" data-bind="visible: showBack, click: goBack"></a>
</div>
<div class="col-xs-3">
    <a class="block btn-home" href="#/home" data-bind="visible: showHome"></a>
</div>

然后我编辑了app.viewmodel.js文件并添加了这些

// Data
self.back = ko.observable(null);

// UI state
self.showBack = ko.observable(true);
self.showHome = ko.observable(true);
self.goBack = function () {
    if (self.back()) {
        window.location.href = self.back();
    } else {
        window.history.back();
    }
    self.back(null); // Reset
};
self.setBackUrl = function (url) {
    self.back(url);
}

然后在我的addViewModel导航功能上，我添加了以下内容：

if (typeof (options.navigatorFactory) !== "undefined") {
    navigator = options.navigatorFactory(self, dataModel);
} else {
    navigator = function () { // This is our navigator function which sets the current view
        self.showBack(true);
        self.showHome(true);
        self.error(null); // Reset errors
        self.view(viewItem);
    };
}

然后在我的其他视图模型中，我只调用setBackUrl，如下所示：

app.setBackUrl("#/cut-lengths");

如果我想隐藏我的纽扣，那也很容易。我只是在viewModel上创建了一个navigatorFactory，如下所示：

app.addViewModel({
    name: "Home",
    bindingMemberName: "home",
    factory: HomeViewModel,
    navigatorFactory: function (app) {
        return function () {
            app.showBack(false);
            app.showHome(false);
            app.error(null);
            app.view(app.Views.Home);
        }
    }
});
相关文章：