Question

我正在制作一个淘汰应用程序，现在需要实现路由。 Grapnel看起来是一个很好的解决方案，但我用它打了一个砖墙。

Knockout点击事件将当前的“视图模型”传递给您在视图中定义的任何函数 - 如文档here所示。如上所述，这在使用集合时非常有用，我提到的应用程序使用了很多。

我正在寻找一种能够在grapnel路线中使用这种方法的方法，但是当涉及到解决方案时我就迷失了。

我把一个相当简单的小提琴放在一起，试图帮助解释一些事情： 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

我一直在使用淘汰赛，但只是快速浏览了Grapnel。我没有看到将对象作为参数传递的方法。但这显然是单页面应用程序方法，您已将视图模型声明为全局。因此，您可以访问路由器代码中的“appView”：

cross_val_predict(clf, X,y)

然后在viewModel事件中，您可以在设置observable后进行导航。

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

小提琴：example 不确定你的应用程序将是什么，但Angular js将在一个具有可观察和路由的包中完成你想要做的事情。你不需要淘汰赛。

使用Grapnel路由进行Knockout JS参数

1 个答案: