1

我有这样的场景。

  1. 当页面导航到#Action 时初始加载。
  2. 一旦选择动作被执行 data-bind="with tag is loaded"
  3. 执行用户点击“做某事”动作。它取代了整个“parentNode”
  4. 现在当用户点击返回时，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. 在列出的任何项目下选择“子项目”（项目 1、项目 2、项目 3）
  2. 选择任何带有标签的子项（子项 1、子项 2）
  3. 部分视图将显示为带有“下一个视图”链接的“子项目 {x}”
  4. 单击“下一个视图”链接。
  5. 将显示“下一个局部视图”。
  6. 按下返回按钮。

我要做的事情是加载 SubItems 并选择“Sub Item 1”视图。

  1. 项目清单
4

1 回答 1

0

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

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

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

于 2013-02-28T13:52:16.427 回答