javascript - 使用 Grapnel 路由 knockout JS 参数

Question

我正在开发一个 knockout 应用程序，现在需要实现路由。 Grapnel 看起来是一个很好的解决方案，但我却遇到了一些困难。

Knockout 点击事件将当前“ View 模型”传递给您在 View 中定义的任何函数 - 如文档所述 here 。正如前面提到的，这在处理集合时非常有用，而且我提到的应用程序经常使用它。

我正在寻找一种能够在抓钩 route 使用它的方法，但是当谈到解决方案时我迷失了。

我整理了一个相当简单的 fiddle 来尝试帮助解释事情: https://jsfiddle.net/nt0j49x7/4/

HTML

<div id="app">
  <ul class="playlist" data-bind="foreach: albumList">
    <li class="album">
      <a href="" data-bind="click: $root.showAlbumInfo">
        <span data-bind="text: title"></span> -
        <strong data-bind="text: artist"></strong>
      </a>
    </li>
  </ul>

  <div data-bind="with: selectedAlbum">
    <img data-bind="attr:{src: coverImg}" />
    <div>
      <span data-bind="text: title"></span> - <span data-bind="text: artist"></span> 
      <a data-bind="attr:{href: spotifyLink}">Listen on spotify</a>
    </div>
  </div>

</div>

Javascript

var appView = {
    albumList: ko.observableArray([
    {id: 1, title:'Helioscope' , artist: 'Vessels', coverImg: 'http://ecx.images-amazon.com/images/I/91nC-KVZBBL._SX466_.jpg', spotifyLink: 'https://open.spotify.com/album/3dARFB98TMzKLHwZOgKZhE'},
    {id: 2, title:'Dilate' , artist: 'Vessels', coverImg: 'http://ecx.images-amazon.com/images/I/31AvNaBtnpL._SX466_PJautoripBadge,BottomRight,4,-40_OU11__.jpg', spotifyLink: 'https://open.spotify.com/album/7yapNLdtqlYiGFbuEuGRIt'},
    {id: 3, title:'White fields and open devices' , artist: 'Vessels', coverImg: 'http://ecx.images-amazon.com/images/I/918vEDkM5PL._SX522_PJautoripBadge,BottomRight,4,-40_OU11__.jpg', spotifyLink: 'https://open.spotify.com/album/4kB1vlgei2DvIweeBoiNVu'}
  ]),
  selectedAlbum: ko.observable(),
    showAlbumInfo: function(album, event) {
    // knockout supplies the clicked model value as the first parameter
    appView.selectedAlbum(album);
  }
};

var routes = {
        'album/:id' : function(req, event){
            // Any ideas on how to pass the 'album' object knockout is
      // passing to the appView.showAlbumInfo method into this
      // route handler? I can use the ID request param to
      // get the model from albumList and set the selectedAlbum
      // but that isn't what I'm trying to achieve.
        }
};

//var router = new Grapnel(routes);

ko.applyBindings(appView, document.getElementById('app'));

Answer 1

我已经使用 knockout 一年了，但只快速浏览了一下 Grapnel。我没有看到将对象作为参数传递的方法。但这显然是单页应用程序方法，并且您已将 View 模型声明为全局 View 模型。因此您可以在路由器代码中访问“appView”:

var router = new Grapnel();
//must include the id in the route for function to fire on id change
router.navigate('/album/' + album.id);
            console.info(appView.selectedAlbum());
        }
);

然后在您的 viewModel 事件中，您可以在设置可观察值后进行导航。

showAlbumInfo: function(album, event) {
    // knockout supplies the clicked model value as the first parameter
    appView.selectedAlbum(album);
    router.navigate('/album/' + album.id);
}

fiddle :example 不确定你的应用程序会是什么样，但 Angular js 会通过可观察对象和路由在一个包中完成你想要做的所有事情。你不需要 knockout 。