Question

我有这样的场景。

当页面导航到#Action时最初加载。
执行select操作后，data-bind =“with tag is loaded”
用户点击“执行某事”操作。这取代了整个“parentNode”
现在当用户点击回来，并且sammy.js注意到散列标签#Action/：id时，我需要加载#Action来取回主View，然后选择id来加载data-bind =再次“带”标签。

我该怎么做？

目前该页面确实返回“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中我有这个：

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

重现步骤：

在列出的任何项目下选择“SubItems”（第1项，第2项，第3项）
选择任何标记的子项目（子项目1，子项目2）
部分视图将显示“Sub Item {x}”和“Next View”链接
点击“下一个视图”链接。
将显示“下一部分视图”。
按后退按钮。

我要做的是加载SubItems并选择“Sub Item 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();
            }
        }
    });
}

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

淘汰赛sammy.js导航问题

1 个答案: