剔除sammy.js导航问题

Question

我有这样的情况。

1. 初始加载时，页面被导航到#Action。
2. 一旦执行了select操作，数据绑定=“with tag被加载”
3. 用户点击“做某事”的动作被执行。它取代了整个"parentNode“
4. 现在，当用户单击back，并且sammy.js注意到哈希标记#Action/:id时，我需要加载#Action才能返回主视图，然后选择id再次加载数据绑定=“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. 在所列任何项目(项目1、项目2、项目3)下选择"SubItems“。
2. 选择任何标记的子项(子项1，子项2)
3. 部分视图将使用"Sub Item {x}“和"Next View”链接显示
4. 点击“下一个视图”链接。
5. “下一个部分视图”将显示。
6. 按下后按钮。

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

1. 列表项目

Answer 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();
            }
        }
    });
}

我还无法在您的解决方案中测试这一点(打开它时会出现错误)，但我相信这是执行您要求的一般结构。