Question

我目前正在使用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 中传递一个字符串，当按下后退按钮时会知道如何指向正确的 ViewModel

是否可以这样做？

我希望我已经解释得很好，如果我没有请求，我会更加努力：D

Answer 1

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

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

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

既不提供编译时检查，也就是它们的美妙之处，你可以添加任何你想要的东西。据说，在ViewBag和ViewData上使用强类型视图模型总是很好的做法。

如果您希望在视图模型中放置一些内容而不是向ViewBag添加属性，而不是在每个名为PreviousViewModel的视图模型中添加另一个属性，并在您使用该模型时填充它。

使用ViewBag或ViewData的示例

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

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

希望这有帮助

Answer 2

我现在已经解决了这个问题。首先我更改了我的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);
        }
    }
});

每个viewModel的knockoutjs mvc按钮动作更改

2 个答案: