淘汰赛 sammy.js 导航问题答案

【问题标题】：knockout sammy.js navigation issue淘汰赛 sammy.js 导航问题
【发布时间】：2013-01-23 18:42:36
【问题描述】：

我有一个这样的场景。

在页面导航到#Action 时初始加载。
一旦执行了选择操作 data-bind="with tag is loaded"
用户点击“做某事”动作被执行。它取代了整个“parentNode”
现在当用户点击返回时，sammy.js 注意到井号标签#Action/:id，我需要加载#Action 以返回主视图，然后选择 id 以加载 data-bind=再次使用“with”标签。

我该怎么做？

当前页面确实返回到“Action/:id”，但由于未加载主视图，它不会执行任何操作。我使用了“this.redirect("#Action") 然后选择了节点，但是不起作用。

<div id="parentNode">
    <ul data-bind="foreach: items">
       <li data-bind="click: $root.selectItem">
          <h2><span data-bind="text: Sometext"></span></h2>
       </li>
    </ul>
    <div data-bind="with: selectedItem">
       <a data-bind="click: loadSomething">Do Something</a>
    </div>
</div>

在我的视图模型中我有这个：

viewModel.selectItem= function (item) {
    location.hash = "Action/" + item.id();
}

viewModel.loadSomething = function () {
    location.hash = "Action/" + viewModel.someSelectedItem().id() +"/SubAction";
}

$.sammy(function () {

  this.get('#Action', function () {
     $.ajax({
         url: '@Url.Action("GetMainView")',
         type: "GET",
         data: self.someId(),
         dataType: "json",
         success: function (result) {
           $("#parentNode").html(result.message);
         }
   });

  this.get('#Action/:id', function () {
      var id = this.params["id"];
      var matchItem = ko.utils.arrayFirst(viewModel.MainItems(), function (item) {
                return item.id() == id;
       });

       viewModel.someSelectedItem(matchItem);
  });

  this.get('#Action/:id/SubAction', function () {
    var id = this.params['id'];
    $.ajax({
         url: '@Url.Action("ViewSomething")',
         type: "GET",
         data: { id: id },
         success: function (result) {
             $('#parentNode').html(result.message);
         }
    });
 });
});

示例代码：https://skydrive.live.com/redir?resid=33048714B5BF3B4B!913

复制步骤：

在列出的任何项目（项目 1、项目 2、项目 3）下选择“子项目”
选择任何带有标签的子项（子项 1、子项 2）
部分视图将显示为带有“下一个视图”链接的“子项目 {x}”
点击“下一个视图”链接。
将显示“下一个局部视图”。
按返回按钮。

我要做的是加载子项并选择“子项 1”视图。

列表项

【问题讨论】：

标签： asp.net-mvc-3 knockout.js sammy.js

【解决方案1】：

我不确定这是否可行，但您能否创建一个单独的辅助函数来加载主视图。那么就会出现以下情况：

this.get('#Action', function () {
    LoadMainView();
}

this.get('#Action/:id', function () {
    if($('#parentNode').length == 0) {
        LoadMainView(function() {
             var id = this.params["id"];
             var matchItem = ko.utils.arrayFirst(viewModel.MainItems(), function (item) {
                 return item.id() == id;
             });

             viewModel.someSelectedItem(matchItem);
        })
    }
}

然后您的 LoadMainView 函数将接受一个回调并且是这样的：

function LoadMainView(callback) {
    $.ajax({
        url: '@Url.Action("GetMainView")',
        type: "GET",
        data: self.someId(),
        dataType: "json",
        success: function (result) {
            $("#parentNode").html(result.message);
            if(typeof callback == "function") {
                callback();
            }
        }
    });
}

我无法在您的解决方案中对此进行测试（打开它时出错），但我相信这是执行您所要求的一般结构。

【讨论】：